@font-face {
  font-family: asian;
  src: url("Asianfont1.ttf")
}
* {
  font-family: asian;
}
body {
  overflow: hidden;
}
#gamecontainer {
  max-width: 100vw;
  max-height: 100vh;
  width: calc(100vh / 57 * 104);
  height: calc(100vw / 104 * 57);
}
#canvasPlayground {
  background: lightblue url("../Bilder/backgroundend.gif");
  background-size: 103%;
}
#description {
  margin-bottom: 1em;
}
#pauseWithESC {
  position: absolute;
  top: 5vh;
}
#gameover, #win {
  max-width: 100vw;
  max-height: 100vh;
  width: calc(100vh / 57 * 104);
  height: calc(100vw / 104 * 57);
  z-index: 5;
  display: block;
  color: #eeeeee;
  font-size: 5vw;
  text-align: center;
  text-shadow: 0 0 3px black;
  transition: top 1s ease-in;
}
#advertisements {
  font-size: clamp(1px, 2vw, 2vh);
}
#points, #highscore, #zeiten, #bestzeit  {
  width: 25%;
  height: auto;
  float: left;
  text-align: left;
  background-image: linear-gradient(blue, lightblue);
  padding: 0.7em;
}
#pointsvalue, #highscorevalue, #timevalue{
  display: inline;
  width: 50%;
  position: relative;
  right: 0;
}
#zeiten {
}
#bestzeit {
  text-align: right;
}
#btnPlayAgain {
  display: block;
  width: 25vw;
  height: 10vh;
  position: relative;
  margin: 0 auto;
  top: -20vh;
  opacity: 0;
  transition: opacity 2s ease;
}
#bstime {
  display: none;
}
#beforegame {
  width: 100%;
  height: 430px;
  position: relative;
  top: -430px;
  padding: 0 auto;
}
#win {
  position: absolute;
  top: 0;
  padding-top: 10vh;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  text-align: center;
  color: gold;
  transform: scale(0);
  transition: transform 2s ease;
}
.touchareas {
  display: none;
  width: clamp(20px, 15vw ,60px);
  height: clamp(20px, 15vw ,60px);
  line-height: clamp(20px, 15vw ,60px);
  float: left;
  text-align: center;
  margin-right: 10px;
  background: rgb(150, 150, 150, 0.5);
  position: relative;
  top: clamp(-60px, -15vw ,-20px);
  z-index: 10;
  font-size: clamp(4px, 5vw, 30px);
}
#jumptouch {
  float: right;
}