html{
    font-size: 62.5%;
}

body{
    background-color: black;
    box-sizing: border-box;
    font-family: "Barriecito",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    padding: 0;
    margin: 0;
    color: white;

}
.flex-container{
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    flex-direction: column;
}
img{
    width: 10rem;
}
.honk {
  font-family: "Bitcount Grid Double", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
}
.barriecito-regular {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
}
main{
    display: flex;
    flex-direction: column;
    gap:5rem;
}
.head{
    width: 100vw;
    border-bottom: 2px dashed white;
    font-size: 10rem;
}
.current_state{
    display: flex;
    gap:10rem;
    justify-content: center;
   
}
.player,.computer{
    font-size: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap : 3rem;
}
#player-choice,#computer-choice{
    border: 2px dashed white;
    width: 13rem;
    height: 13rem;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    font-size: 9rem;
    border-radius: 2rem;
}
button{
    font-family: "Barriecito", system-ui;
    font-size: 10rem;
    transform: scale(1);
    background-color: brown;
}
button:active{
    transform: scale(1.2);
}
.score{
    font-size: 3rem;
    display: flex;
    justify-content: space-evenly;
}
.c{
    background-color: black;
    border: black;
    display: flex;
}
footer{
    flex-grow: 1;
    display: flex;
    align-items: center;
}
button.reset{
    background-color: black;
    border: 2px dashed white;
    padding: 1rem;
    border-radius: 2rem;
    color: white;
    font-size: 5rem;
}
#game-over { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  backdrop-filter: blur(10px); 
  background: white; 
  height: min(40rem); 
  width: min(70rem, 90%); 
  border-radius: 5rem;
  background-color: rgb(0,0,0);
  border: white 0.1rem dashed;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
} 
.text{
    font-size: 5rem;
    text-align: center;
}
.button-box{
    display: flex;
    justify-content: space-evenly;
    gap: 10rem;
}
.button-box button{
    background-color: rgb(0, 0, 0);
    padding: 1rem;
    border-radius: 2rem;
    color: white;
    font-size: 5rem;
    transform: scale(1);
}
.button-box button#play_again{
    border: 2px dashed white;
}

button:active{
    transform: scale(1.2);
}
#back-drop { 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 100vh; 
  width: 100vw; 
  background: rgba(7, 7, 7, 0.1);  
  backdrop-filter: blur(5px); 
}
.winner_is_player{
    color: green;
}
.winner_is_robot{
    color: red;
}
.toggle{
    display: none;
}
.choice{
    margin-left: -4rem;
    display: flex;
    justify-content: center;
    gap: 4rem;
}
@media screen and (max-width: 768px) {
  html {
    font-size: 45%; 
  }
    img{
    width: 6rem;
  }
  .c{
    width: 6rem;
  }
  .choice{
    max-height: 8rem;
  }
    #player-choice,#computer-choice{
    width: 10rem;
    height: 10rem;
  }
    footer{
    align-items: flex-start;
    }
  button.reset{
    font-size: 3.5rem;
    margin-top: 4rem;
  }
}
@media screen and (max-width: 400px) {
  html {
    font-size: 37%; 
  }
  img{
    width: 6rem;
  }
  .c{
    width: 6rem;
  }
  .choice{
    max-height: 8rem;
  }
  #player-choice,#computer-choice{
    width: 10rem;
    height: 10rem;
  }
  footer{
    align-items: flex-start;
    }
  button.reset{
    font-size: 3.5rem;
    margin-top: 4rem;
  }
}