body {
  height: 100vh;
  background-image: url('assets/img/5_background/background.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'tacobox', Arial, Helvetica, sans-serif;
}

.headline {
  padding-top: 22px;
  font-size: 37px;
}

.canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  border-radius: 33px;
  filter: drop-shadow(2px 4px 9px black);
}

.game-window {
  flex-direction: column;
}

.start {
  flex-direction: column;
  max-width: 720px;
  max-height: 480px;
  filter: drop-shadow(2px 4px 6px black);
}

.start img {
  width: 100%;
  height: 100%;
  border-radius: 33px;
}

.info-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-image: url('assets/img/9_intro_outro_screens/start/wandet.jpg');
  background-position: center;
  background-size: cover;
  max-width: 720px;
  max-height: 480px;
  border-radius: 33px;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.539));
}

.game-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 720px;
  max-height: 480px;
}

.end-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 720px;
  height: 484px;
  border-radius: 33px;
}

footer {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: end;
  width: 100%;
}

.imprint {
  padding: 8px 30px;
  font-size: 18px;
  cursor: pointer;
}

.rotateScreen {
  position: absolute;
  top: 0;
  z-index: 9999;
  background-image: linear-gradient(
    180deg,
    hsl(214deg 59% 44%) 0%,
    hsl(214deg 60% 47%) 18%,
    hsl(213deg 61% 50%) 26%,
    hsl(213deg 68% 52%) 33%,
    hsl(213deg 76% 55%) 39%,
    hsl(257deg 26% 61%) 44%,
    hsl(349deg 29% 60%) 50%,
    hsl(16deg 59% 59%) 56%,
    hsl(26deg 82% 51%) 61%,
    hsl(27deg 82% 55%) 67%,
    hsl(28deg 82% 58%) 74%,
    hsl(29deg 82% 61%) 82%,
    hsl(31deg 81% 63%) 100%
  );
}

.rotate-img {
 object-fit: contain;
 object-position: center;
}

.mobile {
  display: flex;
  justify-content: end;
  position: absolute;
  bottom: 10px;
  width: 100dvw;
  max-width: 720px;
}

.mobile p {
  padding-right: 20px;
}

@font-face {
  font-family: 'tacobox';
  src: url('assets/fonts/tacobox.TTF') format('truetype');
}

@font-face {
  font-family: 'eldorado-bold';
  src: url('assets/fonts/eldorado-bold.otf') format('truetype');
}

@font-face {
  font-family: 'Mexina-xRndO';
  src: url('assets/fonts/Mexina-xRndO.otf') format('truetype');
}

@media(max-width: 840px) {
  h1 {
    font-size: 1.5em;
  }
}

@media (max-width: 740px) and (max-height: 360px) {
  .mobile-container {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .start img {
    width: 89%;
  }

  .mobile {
    width: 100%;
  }

  .mobile p {
    padding-right: 65px;
  }
}

@media (max-width: 740px) {
  .canvas {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .end-screen {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .start img {
    border-radius: 0;
  }

  .info-menu {
    border-radius: 0;
  }
}

@media (max-height: 480px) {
  .canvas {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .end-screen {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .info-menu {
    border-radius: 0;
  }
}