@import url('https://fonts.googleapis.com/css2?family=Jersey+25&display=swap');

body{
  background-color: rgb(237,237,233);
  overflow: scroll;
  z-index: 1;
}

.hud{
  display: flex; 
  flex-direction: row;
  justify-content: space-around;
  align-items:center ;
  max-width:100vw;
  height:10vh;
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: rgb(245,235,224);
  color: rgb(201,240,255);
  margin: 2vh
}

.score, .time{
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(0,0,0);
    font-size: 1em;
    max-width: 100%;
    max-height: 80%;
    height:auto;

}

.img{
    max-width: 100%;
    max-height: 100%;
}

.game_area{
  display:flex;
  align-items: center;
  justify-content: center;
}

.game{
  width: 80%;
  height: 100%;
  aspect-ratio: 1 / 1;
    	    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.difficulty_selectors{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:center;
  gap: 1vh;
  margin-top: 2vh;
}

button{
  flex-grow:1;
  padding: 17px 40px;
  border-radius: 10px;
  border: 0;
  background-color: rgb(201, 240, 255);
  letter-spacing: 1.5px;
  font-size: 15px;
  transition: all 0.3s ease;
  box-shadow: rgb(44, 87, 132) 0px 10px 0px 0px;
  color: hsl(0, 0%, 0%);
  cursor: pointer;
}

button:active {
  background-color: rgb(78, 166, 153);
  /*50, 168, 80*/
  box-shadow: rgb(44, 87, 132) 0px 0px 0px 0px;
  transform: translateY(5px);
  transition: 200ms;
}

.hidden_win_screen{
 display:none;
 flex-direction: column;
 justify-content:center;
 align-items: center;
 font-size: xx-large;
}

.hidden_loss_screen{
 display:none;
 flex-direction: column;
 justify-content:center;
 align-items: center;
 font-size: xx-large;
}

.custom_difficulty_modal{
  display:none;
  position: fixed;
  margin: 5% auto;
  left: 0;
  right: 0;
  z-index: 2;
}


.box {
    background-color: whitesmoke;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    position: relative;
    -webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}

/*animation classes*/

.fade-in{
    animation: fadeIn 30s; 
}


.lose_shake{
  animation: vibrate 1s infinite; 
}


.blur-in {
    -webkit-animation: blur 2s forwards;
    -moz-animation: blur 2s forwards;
    -o-animation: blur 2s forwards;
    animation: blur 2s forwards;
}

.blur-out {
    -webkit-animation: blur-out 2s forwards;
    -moz-animation: blur-out 2s forwards;
    -o-animation: blur-out 2s forwards;
    animation: blur-out 2s forwards;
}

/*animations*/
@keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes vibrate {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-1deg); }
  20% { transform: rotate(1deg); }
  30% { transform: rotate(0deg); }
  40% { transform: rotate(1deg); }
  50% { transform: rotate(-1deg); }
  60% { transform: rotate(0deg); }
  70% { transform: rotate(-1deg); }
  80% { transform: rotate(1deg); }
  90% { transform: rotate(0deg); }
  100% { transform: rotate(-1deg); }
}

/*media queries*/
@container (height < 200px){
  .score, .time{
    font-size: 70%;
  }
}