@import url("https://fonts.googleapis.com/css2?family=Sarpanch&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

body {
    background-color: black;
    
}

#globalNav {
    color: white;
    font-size: 2vw;
    background-color: black;
    font-family: "Roboto Mono", monospace;
}




ul {
    display: grid;
    grid-template-columns: 20% 1fr 1fr 20%;
    grid-column-gap: 10%;
    justify-items: center;
    
}

ul :nth-child(1) {
    grid-column: 2/2;
}

ul img {
    width: 80%;
}


#list {
    list-style-type: none;
    margin: 0%;
}


footer p {
    color: white;
}



#screen {
  position: relative;
  width: 80%;
  aspect-ratio: 16/9;
  border: 4px solid black;
  margin-left: 8%;
}

#game {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: beige;
  overflow: hidden;
}

#game_background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url("../assets/Background.svg");
}

#pauseScreen {
    position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.position1 {
  left: 30%;
  top: -18%;
}

.position2 {
  left: 50%;
  top: -44%;
}

.position3 {
  left: 10%;
  top: -12%;
}

.position4 {
  left: 20%;
  top: -12%;
}

.position5 {
  left: 90%;
  top: -32%;
}

.position6 {
  left: 40%;
  top: -27%;
}

.position7 {
  left: 25%;
  top: -37%;
}

.position8 {
  left: 55%;
  top: -19%;
}

.position9 {
  left: 35%;
  top: -30%;
}

.position10 {
  left: 75%;
  top: -50%;
}

.position11 {
  left: 85%;
  top: -50%;
}

.position12 {
  left: 45%;
  top: -80%;
}

.position13 {
  left: 45%;
  top: -20%;
}

.position14 {
  left: 35%;
  top: -14%;
}

.position15 {
  left: 70%;
  top: -22%;
}

#container1 {
  position: absolute;
  width: 10%;
  aspect-ratio: 1/0.96;
}

#container2 {
  position: absolute;
  width: 10%;
  aspect-ratio: 1/0.96;
}

#container3 {
  position: absolute;
  width: 10%;
  aspect-ratio: 1/0.96;
}

#container4 {
  position: absolute;
  width: 10%;
  aspect-ratio: 1/0.96;
}

#container5 {
  position: absolute;
  width: 10%;
  aspect-ratio: 1/0.96;
}

#container6 {
  position: absolute;
  width: 10%;
  aspect-ratio: 1/0.96;
}

#a_sprite1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/cookie_star.svg");
  background-size: 100%;
}
#a_sprite1cut {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Perfect_cut_star.svg");
  background-size: 100%;
}

#a_sprite2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/cookie_triangel.svg");
  background-size: 100%;
}

#a_sprite2cut {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Perfect_cut_triangel.svg");
  background-size: 100%;
}

#a_sprite3 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/cookie_circel.svg");
  background-size: 100%;
}

#a_sprite3cut {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Perfect_cut_circel.svg");
  background-size: 100%;
}

#a_sprite4 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Burned_cookie_star.svg");
  background-size: 100%;
}

#a_sprite4crack {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Broken_burned_cookie_star.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

#a_sprite5 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Burned_cookie_triangel.svg");
  background-size: 100%;
}
#a_sprite5crack {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Broken_burned_cookie_triangel.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

#a_sprite6 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Burned_cookie_circel.svg");
  background-size: 100%;
}

#a_sprite6crack {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Broken_burned_cookie_circel.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

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



/* .rotateAndDisappear {
    animation: rotateAndDisappear 1s;
} */

/* @keyframes rotateAndDisappear {
    100% {
        transform: rotate(1.5turn) scale(0);
    }
} */

.fallDown {
  animation-name: falling;
  animation-duration: 3s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.hidden {
  visibility: hidden;
}

#time_board {
  position: absolute;
  aspect-ratio: 1/0.38;
  width: 20%;
  font-family: "Sarpanch", sans-serif;
  background-image: url("../assets/Timer.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 3%;
  left: 40%;
  color: red;
  font-size: 5vw;
}

#timeleft {
  margin-left: 20%;
}

/* HEALTBAR */
.healthbar1 {
  background-image: url("../assets/3-lives.svg");
  position: absolute;
  aspect-ratio: 1/0.38;
  width: 15%;
  background-size: contain;
  background-repeat: no-repeat;
  left: 12%;
  top: 2%;
}

.healthbar2 {
  background-image: url("../assets/1-lost-heart.svg");
  position: absolute;
  aspect-ratio: 1/0.38;
  width: 15%;
  background-size: contain;
  background-repeat: no-repeat;
  left: 12%;
  top: 2%;
}

.healthbar3 {
  background-image: url("../assets/2-lost-hearts.svg");
  position: absolute;
  aspect-ratio: 1/0.38;
  width: 15%;
  background-size: contain;
  background-repeat: no-repeat;
  left: 12%;
  top: 2%;
}

.healthbar4 {
  background-image: url("../assets/3-lost-hearts.svg");
  position: absolute;
  aspect-ratio: 1/0.38;
  width: 15%;
  background-size: contain;
  background-repeat: no-repeat;
  left: 12%;
  top: 2%;
}

/* Buttons in game */
#containerPause {
  position: absolute;
  width: 5%;
  aspect-ratio: 1/0.95;
  right: 1%;
  top: 80%;
}

#spritePause {
    position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Pause.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

#containerUnpause {
    position: absolute;
    width: 5%;
    aspect-ratio: 1/0.95;
    right: 1%;
    top: 80%;
  }
  
  #spriteUnpause {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../assets/unPause.svg");
    background-size: 100%;
    background-repeat: no-repeat;
  }

#containerUnmute {
  position: absolute;
  width: 5%;
  aspect-ratio: 1/0.95;
  right: 1%;
  top: 90%;
}

#spriteUnmute {
    position:absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Unmute.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

#containerMute {
    position: absolute;
    width: 5%;
    aspect-ratio: 1/0.95;
    right: 1%;
    top: 90%;
  }
  
  #spriteMute {
      position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../assets/Mute.svg");
    background-size: 100%;
    background-repeat: no-repeat;
  }

#containerHowDoIPlay {
  position: absolute;
  width: 4.62%;
  aspect-ratio: 1/1;
  right: 1%;
  top: 69.5%;
}

#spriteHowDoIPlay {
  width: 100%;
  height: 100%;
  background-image: url("../assets/howDoIPlay.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

#score_board {
  background-image: url("../assets/points-money.svg");
  position: absolute;
  aspect-ratio: 16/8;
  width: 20%;
  background-size: contain;
  left: 75%;
}
.yourScoreIs {
  color: green;
  margin-left: 20%;
  margin-top: 23%;
  font-size: 2vw;
}

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

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

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

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

#textInstructions {
  aspect-ratio: 1/5;
  width: 45%;
  margin-left: 30%;
  margin-top: 4%;
  font-family: "Roboto Mono", monospace;
  font-size: 1.54vw;
  line-height: 155%;
}

#containerGoBack {
  position: absolute;
  width: 10%;
  aspect-ratio: 1/0.96;
  left: 85%;
  top: 10%;
  background-repeat: no-repeat;
}

#spriteGoBack {
  width: 100%;
  height: 100%;
  background-image: url("../assets/go_Back.svg");
  background-size: 100%;
  z-index: 2;
  left: 80%;
  top: 10%;
  background-repeat: no-repeat;
}

#containerStartGame {
  position: absolute;
  width: 10%;
  aspect-ratio: 1/0.96;
  left: 40%;
  top: 80%;
}

#spriteStartGame {
  width: 100%;
  height: 100%;
  background-image: url("../assets/play_button.svg");
  background-size: 100%;
  z-index: 2;
  left: 30%;
  top: 80%;
}

#containerHowTo {
  position: absolute;
  width: 17%;
  aspect-ratio: 1/0.96;
  left: 55%;
  top: 80%;
  background-repeat: no-repeat;
}

#spriteHowTo {
  width: 100%;
  height: 100%;
  background-image: url("../assets/How_to_play.svg");
  background-size: 100%;
  z-index: 2;
  left: 30%;
  top: 80%;
  background-repeat: no-repeat;
}

#containerPlayAgain {
  position: absolute;
  width: 15%;
  aspect-ratio: 1/0.96;
  left: 45%;
  top: 80%;
  background-repeat: no-repeat;
}

#spritePlayAgain {
  width: 100%;
  height: 100%;
  background-image: url("../assets/Play_again.svg");
  background-size: 100%;
  z-index: 2;
  left: 45%;
  top: 80%;
  background-repeat: no-repeat;
}

#containerPlayAgain2 {
  position: absolute;
  width: 15%;
  aspect-ratio: 1/0.96;
  left: 43%;
  top: 80%;
  background-repeat: no-repeat;
}

#spritePlayAgain2 {
  width: 100%;
  height: 100%;
  background-image: url("../assets/Play_again.svg");
  background-size: 100%;
  z-index: 3;
  left: 45%;
  top: 80%;
  background-repeat: no-repeat;
}

.fade_Out {
  opacity: 100%;
  animation-name: fadeout;
  animation-duration: 1s;
  animation-direction: normal;
  animation-timing-function: cubic-bezier(0,-0.01,1,-0.34);
  animation-fill-mode: forwards;
}

@keyframes fadeout {
  0% {
    opacity: 100%;
  }

  100% {
    opacity: 0%;
  }
}

@keyframes falling {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(1000%);
  }
}