html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#fps {
  position: absolute;
  font-size: 24px;
  color: #ff0044;
  top: 0px;
  right: 10px;
}
#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

#canvasZone {
  width: 100%;
  height: 100%;
}

#front {
  top: 280px;
}

#back {
  top: 350px;
}

#info {
  top: 420px;
}

#front,
#back,
#info {
  position: absolute;
  border: none;
}


#front {
  right: 10px;
  width: 40px;
  height: 40px;
}
#back {
  right: 10px;
  width: 40px;
  height: 40px;
}

#info {
  right: 14px;
  width: 30px;
  height: 30px;
}



@media screen and (max-width: 1080px) {
  #front {
    width: 100px;
    height: 100px;
    top: 280px;
  }
  #back {
    width: 100px;
    height: 100px;
    top: 480px;
  }

  #info {
    width: 90px;
    height: 90px;
    top: 680px;
  }
}

@media only screen and (orientation: landscape) {
  #front {
    width: 50px;
    height: 50px;
    top: 70px;
  }
  #back {
    width: 50px;
    height: 50px;
    top: 150px;
  }

  #info {
    width: 40px;
    height: 40px;
    top: 230px;
  }
}