:root {
  --halfSide: calc((100vw - (100vh / 59 * 50)) / 2);
  --heightAdvertisements: clamp(10px, 5vh, 30px);
}
body {
  background-image: linear-gradient(0deg, lightgreen 10%, lightblue 90%);
  overflow: hidden;
}
#canvasPlayground2, #canvasPlayground {
  width: 100vw;
  max-width: calc(100vh / 59 * 50);
  height: calc(100vw / 50 * 59);
  max-height: 100vh;
  position: absolute;
  top: var(--heightAdvertisements);
  left: clamp(0px, var(--halfSide), 1000px);
  background-color: #101142;
  z-index: 0;
}
#canvasPlayground {
  z-index: 2;
  background: none;
}
#advertisements {
  width: 100vw;
  max-width: calc(100vh / 59 * 50);
  height: var(--heightAdvertisements);
  font-size: clamp(2px, 2vw, 2vh);
  position: relative;
  z-index: 1;
}
#gameover {
  width: 100vw;
  max-width: calc(100vh / 59 * 50);
  background: rgb(255, 0, 0, 0.7);
  border: 10px red solid;
  font-size: 3em;
  font-family: Alien Encounters;
  text-align: center;
  padding-top: 25vh;
  color: white;
  z-index: 3;
  position: absolute;
  left: clamp(0px, var(--halfSide), 1000px);
}
#pauseWithESC {
  top: 0;
  position: absolute;
  width: 100vw;
  max-width: 100vh;
  z-index: 10;
}
#points, #highscore, #saltos {
  width: 30%;
  height: 100%;
  line-height: clamp(10px, 5vh, 30px);
  float: left;
  padding: auto;
  padding-left: 1%;
  background-image: linear-gradient(170deg, lightblue, #ade6df);
  border-right: 1px lightblue solid;
  margin-bottom: 0.4em;
}
#highscore {
  text-align: left;
}
#saltos {
  width: 40%;
}
#pointsvalue, #highscorevalue {
  width: auto;
  display : inline-block;
  text-align: right;
  float: right;
  padding-right: 1vw;
}
#btnPlayAgain {
  display: none;
  color: white;
  font-size: 4vh;
  text-align: center;
  background: rgb(255,0,0,0.4);
}
#saltoshow {
  position: fixed;
  opacity: 0;
  z-index: 100;
  top: 18vh;
  left: 30vw;
  font-size: 4vh;
  transform: rotate(-20deg);
  color: #FFCC33;
}