body {
  /*margin: 0;
  padding: 0;*/
}
.joystick {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  background: url(joystick-bg.png) no-repeat center center;
  background-size: contain;
}

.joystick-relative {
  width: 100%;
  height: 100%;
}

.joystick-relative-base-stick {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 0;
  padding-bottom: 0;
  margin-left: 0;
  margin-top: 0;
  border-radius: 100%;
  background-color: #000000;
  border: 3px solid #ADDE00;
}

.joystick-relative-stick {
  position: absolute;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  width: 11%;
  height: 0;
  margin-left: 0;
  margin-top: 0;
  border-radius: 100%;
  background-color: #ADDE00;
  border: 3px solid #CCCCCC;
}
