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

#game {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

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

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

#game_ui {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pos0 {
  top: 20%;
  left: 5%;
}
.pos1 {
  top: 20%;
  left: 15%;
}
.pos2 {
  top: 20%;
  left: 25%;
}
.pos3 {
  top: 20%;
  left: 35%;
}
.pos4 {
  top: 20%;
  left: 45%;
}
.pos5 {
  top: 20%;
  left: 55%;
}

#bad_container1 {
  width: 15%;
  aspect-ratio: 400/350;
  position: absolute;
  z-index: 2;
}

#bad_sprite1 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/png/chocolate_png.png);
  background-size: cover;
}

#good_container1 {
  width: 6%;
  aspect-ratio: 150/400;
  position: absolute;
  z-index: 2;
}

#good_sprite1 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/png/bottle_png.png);
  background-size: cover;
}

#bad_container2 {
  width: 15%;
  aspect-ratio: 400/400;
  position: absolute;
  z-index: 2;
}

#bad_sprite2 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/png/plushie_png.png);
  background-size: cover;
}

#good_container2 {
  width: 15%;
  aspect-ratio: 400/350;
  position: absolute;
  z-index: 2;
}

#good_sprite2 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/png/book_png.png);
  background-size: cover;
}

#good_container3 {
  width: 6%;
  aspect-ratio: 150/400;
  position: absolute;
  z-index: 2;
}

#good_sprite3 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/png/lipstick_png.png);
  background-size: cover;
}

#good_container4 {
  width: 15%;
  aspect-ratio: 400/275;
  position: absolute;
  z-index: 2;
}

#good_sprite4 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/png/music_png.png);
  background-size: cover;
}

#time_container {
  width: 18%;
  aspect-ratio: 300/40;
  position: absolute;
  top: 3.5%;
  left: 78%;
  background-color: black;
  border: white 2px solid;
}

#time_sprite {
  width: 100%;
  aspect-ratio: 300/40;
  transform-origin: right;
}

.timer {
  animation-name: timer_kf;
  animation-duration: 20s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes timer_kf {
  0% {
    transform: scaleX(1);
    background-color: rgb(219, 241, 158);
  }
  50% {
    background-color: rgb(235, 145, 200);
  }
  100% {
    background-color: red;
    transform: scaleX(0);
  }
}

.fall {
  animation-name: fall_kf;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.speed0 {
  animation-duration: 1.5s;
}

.speed1 {
  animation-duration: 2s;
}

.speed2 {
  animation-duration: 2.5s;
}

.speed3 {
  animation-duration: 3s;
}

@keyframes fall_kf {
  from {
    translate: 0% -400%;
  }

  to {
    translate: 0% 400%;
  }
}

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

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

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

  100% {
    opacity: 0;
  }
}

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

@keyframes zoom_out_kf {
  from {
    scale: 1;
    opacity: 1;
    rotate: 0deg;
  }

  to {
    scale: 0;
    opacity: 0;
    rotate: 360deg;
  }
}

#score {
  color: rgb(255, 198, 198);
  font-size: 2.5vw;
  position: absolute;
  top: 14.5%;
  left: 90%;
}

#life {
  color: rgb(255, 198, 198);
  font-size: 2.5vw;
  position: absolute;
  top: 14.5%;
  left: 81%;
}

#start {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(78, 74, 75);
  z-index: 3;
}

#startbtn {
  position: absolute;
  top: 40%;
  left: 38%;
}

#startbtn p {
  font-size: 7vw;
  color: rgb(218, 200, 203);
  background-color: #a87c74;
  padding: 2vw 5vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 3vw;
  text-transform: uppercase;
  font-family: "Jockey One";
  font-style: normal;
}

#startbtn p:hover {
  font-size: 7vw;
  color: rgb(255, 255, 255);
  background-color: #c24757;
  padding: 2vw 5vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 3vw;
}

#game_over {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(54, 54, 54);
}

#game_over h2 {
  color: white;
  text-transform: uppercase;
  font-family: "Jockey One";
  font-style: normal;
  font-size: 10vw;
  position: absolute;
  top: 5%;
  left: 28%;
}

#game_over p {
  color: rgb(228, 188, 188);
  font-family: "Jockey One";
  font-style: normal;
  font-size: 4vw;
  position: absolute;
  top: 30%;
  left: 30%;
  max-width: 22ch;
}

.restartbtn {
  font-size: 4vw;
  color: rgb(218, 200, 203);
  background-color: #a87c74;
  padding: 2vw 5vw;
  border-radius: 3vw;
  text-transform: uppercase;
  font-family: "Jockey One";
  font-style: normal;
  position: absolute;
  top: 70%;
  left: 35%;
}

.restartbtn:hover {
  color: rgb(255, 255, 255);
  background-color: #c24757;
}

#level_complete {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(252, 252, 252);
}

#level_complete h2 {
  color: rgb(224, 87, 87);
  text-transform: uppercase;
  font-family: "Jockey One";
  font-style: normal;
  font-size: 10vw;
  position: absolute;
  top: 5%;
  left: 32%;
}

#level_complete p {
  color: rgb(228, 188, 188);
  font-family: "Jockey One";
  font-style: normal;
  font-size: 4vw;
  position: absolute;
  top: 30%;
  left: 27%;
  max-width: 24ch;
}

.hide {
  display: none;
}