body {
  background-color: #f0ead8;
}

@media (orientation: landscape) and (min-width: 0px) {
  #body {
    height: 100vh;
    aspect-ratio: 16/9;
    background-position: 0%;
  }

  @media (orientation: landscape) and (min-width: 768px) {
    #body {
      height: 100vh;
      aspect-ratio: 16/9;
      background-position: 0%;
    }

    #screen {
      width: 100%;
      aspect-ratio: 16/9;
      position: relative;
      overflow-x: hidden;
      overflow-y: hidden;
    }

    #game {
      width: 100%;
      height: 100%;
      position: absolute;
      /* display: none; */
    }

    #lyd_knap {
      width: 4%;
      height: 7%;
      aspect-ratio: 70/70;
      position: absolute;
      top: 90%;
      left: 2%;
    }

    #mute {
      width: 100%;
      height: 100%;
      aspect-ratio: 70/70;
      position: absolute;
      background-image: url(svg/mute.svg);
      background-size: cover;
    }

    #unmute {
      width: 100%;
      height: 100%;
      aspect-ratio: 70/70;
      position: absolute;
      background-image: url(svg/unmute.svg);
      background-size: cover;
    }

    #start {
      width: 100%;
      height: 100%;
      background-image: url(svg/startskaerm.svg);
      background-size: cover;
      position: absolute;
      /* display: none; */
    }

    #startknap {
      width: 20%;
      height: 14%;
      aspect-ratio: 320/215;
      position: absolute;
      top: 78%;
      left: 60%;
      background-image: url(svg/startknap.svg);
      background-size: cover;
    }

    #info_knap {
      width: 7%;
      height: 5%;
      aspect-ratio: 170/70;
      position: absolute;
      top: 94%;
      left: 67%;
      background-image: url(svg/info_knap.svg);
      background-size: cover;
    }

    #info {
      width: 81%;
      height: 90%;
      aspect-ratio: 1200/750;
      background-image: url(svg/info.svg);
      background-size: cover;
      position: absolute;
      top: 4%;
      left: 10%;
    }

    #kryds {
      width: 5%;
      height: 8%;
      aspect-ratio: 70/70;
      position: absolute;
      top: 8%;
      left: 90%;
      background-image: url(svg/kryds.svg);
      background-size: cover;
    }

    #game_over {
      width: 100%;
      height: 100%;
      background-image: url(svg/gameover_bg.svg);
      background-size: cover;
      position: absolute;
      /* display: none; */
    }
    #game_over_info {
      width: 48%;
      height: 53%;
      aspect-ratio: 930/580;
      position: absolute;
      top: 8%;
      left: 45%;
      background-image: url(svg/gameover_info.svg);
      background-size: cover;
    }

    #game_over_points {
      position: absolute;
      top: 46%;
      left: 50.5%;
      font-size: 10px;
      font-family: "rockwell-nova", sans-serif;
      color: #521409;
      font-weight: 700;
    }
    #spil_igen_gameOver {
      width: 15.22%;
      height: 10.23%;
      aspect-ratio: 1920.22/1080.23;
      position: absolute;
      top: 43%;
      left: 73%;
      background-image: url(svg/spil_igen_gameover.svg);
      background-size: cover;
      top: 43%;
      left: 73%;
    }

    #level_complete {
      width: 100%;
      height: 100%;
      background-image: url(svg/levelComplet.svg);
      background-size: cover;
      position: absolute;
      /* display: none; */
    }

    #level_complete_info {
      width: 48%;
      height: 53%;
      aspect-ratio: 458.85/170.35;
      position: absolute;
      top: 26%;
      left: 28%;
      background-image: url(svg/levelComplet_info.svg);
      background-size: cover;
    }
    #level_complete_points {
      position: absolute;
      top: 65.5%;
      left: 31.5%;
      font-size: 10px;
      font-family: rockwell-nova, sans-serif;
      color: #3f0c12;
      font-weight: 700;
    }
    #spil_igen_levelComplete {
      width: 21.22%;
      height: 14.23%;
      aspect-ratio: 1920.22/1080.23;
      position: absolute;
      top: 60%;
      left: 52%;
      background-image: url(svg/levelComplet_spil_igen.svg);
      background-size: cover;
    }

    #game_background {
      width: 100%;
      height: 100%;
      position: absolute;
      background-image: url(svg/spilskaerm.svg);
      background-size: cover;
      top: 0%;
      left: 0%;
    }

    #game_elements {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    #game_foreground {
      width: 26%;
      height: 50%;
      aspect-ratio: 0.93/1;
      position: absolute;
      background-image: url(svg/dalecooper_svg.svg);
      background-size: cover;
      top: 51%;
      left: -2%;
    }

    #citat1 {
      width: 20.5%;
      height: 23%;
      aspect-ratio: 0.93/1;
      position: absolute;
      background-image: url(svg/daleCooper_citat1.svg);
      background-size: cover;
      top: 54%;
      left: 20%;
    }

    #citat2 {
      width: 20.5%;
      height: 23%;
      aspect-ratio: 610/385;
      position: absolute;
      background-image: url(svg/daleCooper_citat2.svg);
      background-size: cover;
      top: 54%;
      left: 20%;
    }

    #citat3 {
      width: 19%;
      height: 21%;
      aspect-ratio: 0.93/1;
      position: absolute;
      background-image: url(svg/daleCooper_citat3.svg);
      background-size: cover;
      top: 56%;
      left: 20%;
    }
    #citat4 {
      width: 20%;
      height: 22%;
      aspect-ratio: 0.93/1;
      position: absolute;
      background-image: url(svg/daleCooper_citat4.svg);
      background-size: cover;
      top: 54%;
      left: 20%;
    }

    #loglady_container {
      width: 26%;
      height: 50%;
      aspect-ratio: 290/360;
      position: absolute;
      top: 28%;
      left: 100%;
      /* visibility: hidden; */
    }

    #loglady {
      background-image: url(svg/loglady.svg);
      background-size: cover;
      width: 100%;
      height: 100%;
    }
    #tale_loglady {
      width: 20%;
      aspect-ratio: 14.5/9;
      position: absolute;
      top: 23%;
      left: 68%;
      pointer-events: none;
    }

    #tale1 {
      width: 100%;
      height: 100%;
      position: absolute;
      background-image: url(svg/logLady_citat1.svg);
      background-size: cover;
    }
    #tale2 {
      width: 100%;
      height: 100%;
      position: absolute;
      background-image: url(svg/logLady_citat2.svg);
      background-size: cover;
    }

    #tale3 {
      width: 100%;
      height: 100%;
      position: absolute;
      background-image: url(svg/logLady_citat3.svg);
      background-size: cover;
    }

    #game_ui {
      width: 100%;
      height: 100%;
      position: absolute;
      pointer-events: none;
    }

    /******************   Game elements  ************************/
    #pie_container {
      /* outline: red 4px dotted; */
      aspect-ratio: 20/9;
      width: 15%;
      position: absolute;
      /* top: 30%;
  left: 20%; */
      /* visibility: hidden; */
    }

    #pie_sprite {
      background-image: url(svg/cherrypie.svg);
      background-size: cover;
      width: 100%;
      height: 100%;
    }

    #kaffe_container {
      width: 13%;
      aspect-ratio: 12/9;
      position: absolute;
    }

    #kaffe_sprite {
      background-image: url(svg/kaffekop.svg);
      background-size: cover;
      width: 100%;
      height: 100%;
    }

    #milkshake_container {
      width: 5%;
      aspect-ratio: 1/3;
      position: absolute;
      /* top: 30%;
  left: 75%; */
      /* visibility: hidden; */
    }

    #milkshake_sprite {
      background-image: url(svg/milkshake.svg);
      background-size: cover;
      width: 100%;
      height: 100%;
    }

    #muffin_container {
      width: 15%;
      aspect-ratio: 5/3;
      position: absolute;
    }

    #muffin_sprite {
      background-image: url(svg/blueberrymuffin.svg);
      background-size: cover;
      width: 100%;
      height: 100%;
    }

    /******************   Game-UI  ************************/

    /******************   Timer  ************************/
    #time_board {
      width: 10%;
      aspect-ratio: 11/9;
      position: absolute;
      top: 82%;
      left: 89%;
      /* background-image: url(svg/timer1.svg);
  background-size: cover; */
    }

    #time_sprite1,
    #time_sprite2,
    #time_sprite3,
    #time_sprite4,
    #time_sprite5,
    #time_sprite6,
    #time_sprite7,
    #time_sprite8,
    #time_sprite9,
    #time_sprite10,
    #time_sprite11 {
      width: 100%;
      aspect-ratio: 11/9;
      position: absolute;
      background-size: cover;
    }
    .timer1 {
      background-image: url(svg/timer1.svg);
    }

    .timer2 {
      background-image: url(svg/timer2.svg);
    }

    .timer3 {
      background-image: url(svg/timer3.svg);
    }
    .timer4 {
      background-image: url(svg/timer4.svg);
    }
    .timer5 {
      background-image: url(svg/timer5.svg);
    }
    .timer6 {
      background-image: url(svg/timer6.svg);
    }
    .timer7 {
      background-image: url(svg/timer7.svg);
    }
    .timer8 {
      background-image: url(svg/timer8.svg);
    }

    .timer9 {
      background-image: url(svg/timer9.svg);
    }
    .timer10 {
      background-image: url(svg/timer10.svg);
    }

    .timer11 {
      background-image: url(svg/timer11.svg);
    }

    .hide {
      display: none;
    }

    /******************   Point  ************************/
    #score_board {
      width: 10%;
      aspect-ratio: 8/3;
      position: absolute;
      top: 0;
      left: 85%;
      background-image: url(svg/point.svg);
      background-size: cover;
    }

    #point {
      position: absolute;
      left: 105%;
      top: 10%;
      font-family: adobe-text-pro, serif;
      font-weight: 400;
      font-style: normal;
      color: #6f141e;
      font-size: 55px;
    }

    /******************   Liv  ************************/
    #energy_board {
      width: 20%;
      aspect-ratio: 18/5;
      position: absolute;
      top: 1%;
      left: 2%;
      background-image: url(svg/liv.svg);
      background-size: cover;
    }

    #liv3 {
      width: 22%;
      aspect-ratio: 0.8/1;
      position: absolute;
      top: 0%;
      left: 78%;
      background-image: url(svg/liv_1.svg);
      background-size: cover;
    }

    #liv2 {
      width: 22%;
      aspect-ratio: 0.8/1;
      position: absolute;
      top: 1%;
      left: 55%;
      background-image: url(svg/liv_1.svg);
      background-size: cover;
    }

    #liv1 {
      width: 22%;
      aspect-ratio: 0.8/1;
      position: absolute;
      top: 1%;
      left: 32%;
      background-image: url(svg/liv_1.svg);
      background-size: cover;
    }

    /******************   animationer  ************************/
    .fald {
      animation-name: fald_kf;
      /* animation-duration: 4s; */
      animation-iteration-count: infinite;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    @keyframes fald_kf {
      0% {
        transform: translatey(-10%);
      }
      100% {
        transform: translateY(1000%);
      }
    }

    .drej {
      animation-name: drej_kf;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }

    @keyframes drej_kf {
      0% {
        transform: rotate(0) scale(1);
      }
      50% {
        transform: rotate(180deg) scale(1.25);
      }
      100% {
        transform: rotate(360deg) scale(0);
      }
    }

    .frys {
      animation-play-state: paused;
    }

    .forsvind {
      animation-name: forsvind_kf;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }

    @keyframes forsvind_kf {
      0% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    .vis {
      animation-name: vis_kf;
      animation-duration: 3s;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }

    @keyframes vis_kf {
      0% {
        opacity: 0;
      }
      25% {
        opacity: 1;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }

    .zoom_out {
      animation-name: zoomout_kf;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-fill-mode: both;
    }
    @keyframes zoomout_kf {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(0);
      }
    }

    .zoom_in_out {
      animation-name: zoom_in_out_kf;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-fill-mode: both;
    }
    @keyframes zoom_in_out_kf {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.25);
      }
      100% {
        transform: scale(0);
      }
    }

    .loglady_animation {
      animation-name: loglady_kf;
      animation-duration: 2s;
      animation-iteration-count: 1;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    @keyframes loglady_kf {
      0% {
        transform: translatex(0%) rotate(0deg);
      }
      100% {
        transform: translatex(-60%) rotate(-15deg);
      }
    }

    .loglady_forsvind_animation {
      animation-name: loglady_forsvind__kf;
      animation-duration: 2s;
      animation-iteration-count: 1;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    @keyframes loglady_forsvind__kf {
      0% {
        transform: translatex(0%) rotate(0deg);
      }
      100% {
        transform: translatex(60%) rotate(15deg);
      }
    }
    /******************   Position, delay & speed  ************************/

    .pos0 {
      top: -30%;
      left: 5%;
    }

    .pos1 {
      top: -30%;
      left: 20%;
    }

    .pos2 {
      top: -30%;
      left: 40%;
    }

    .pos3 {
      top: -30%;
      left: 60%;
    }

    .pos4 {
      top: -30%;
      left: 80%;
    }

    .delay0 {
      animation-delay: 0s;
    }

    .delay1 {
      animation-delay: 1s;
    }

    .delay2 {
      animation-delay: 2s;
    }

    .speed0 {
      animation-duration: 3s;
    }

    .speed1 {
      animation-duration: 4s;
    }
    .speed2 {
      animation-duration: 5s;
    }
  }
}