body{
  padding: 0;
  margin:0;
}

#game{
    /* width: 1080px;
    height: 1920px; */
    font-family: Arial, Helvetica, sans-serif;
    width: 360px;
    height: 640px;
    display: block;
    position: relative;
    /*margin: 4em auto 0 auto;*/
    margin: 0 auto;
    padding:0;
    /* background-size:contain; */
    background-color: rgb(0, 0, 0);
    background-repeat: no-repeat;
    background-size: 360px 1886px;
    background-image: url('images/spritesheet.png');
    background-position: 0 -550px;
    
}

#card-grid{
    display: grid;
    margin: 0 auto;
    position: relative;
    top: 72px;
    width: 320px;
    grid-template-columns: 104px 104px 104px;
    grid-template-rows: repeat(4, 124px);
    /* gap: 16px; */
    gap: 6px;
    /* border:3px dotted greenyellow; */
}

.card{
    background-color: #4090f3;
    display: block;
    border-radius: 6px;
    /* cursor: pointer; */
    will-change: transform;
}

.glow{
    -webkit-box-shadow:0px 0px 15px 15px rgba(255,255,255,0.63);
    -moz-box-shadow: 0px 0px 15px 15px rgba(255,255,255,0.63);
    box-shadow: 0px 0px 15px 15px rgba(255,255,255,0.63);
}

.grow-shrink {
  animation-name: growShrink;
  animation-duration: .5s; /* Total time for one cycle */
  animation-iteration-count: 1; 
  animation-timing-function: ease-in-out; /* Smooths the start and end */
  animation-fill-mode: both;
}

@keyframes growShrink {
  0% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(1.16); /* Grows to 1.5 times the size */
  }
  100% {
    transform: scale(1); /* Returns to original size */
  }
}

.fadeout{
  animation-name: fadeout;
  animation-duration: .3s; /* Total time for one cycle */
  animation-iteration-count: 1; 
  animation-timing-function: linear; /* Smooths the start and end */
  animation-fill-mode: forwards ;

}

@keyframes fadeout {
  0% {
    opacity: 1; /* Original size */
  }
  100% {
    opacity: 0; /* Returns to original size */
  }
}

.fadeup{
  animation-name: fadeup;
  animation-duration: 1s; /* Total time for one cycle */
  animation-iteration-count: 1; 
  animation-timing-function: linear; /* Smooths the start and end */
  animation-fill-mode: forwards ;

}

@keyframes fadeup {
  0% {
    opacity: 0; /* Original size */
  }
  100% {
    opacity: 1; /* Returns to original size */
  }
}

#notFlipped{
    background-color: #e0e0e0;
    border:2px solid white;
    background-repeat: no-repeat;
    background-size: 360px 1886px;
    background-image: url('images/spritesheet.png');
    background-position: -128px -406px ;

}


.market{
    background-repeat: no-repeat;
    background-size: 360px 1886px;
    background-image: url('images/spritesheet.png');
    background-position: -182px -146px ;
}

.crab{
    background-repeat: no-repeat;
    background-size: 360px 1886px;
    background-image: url('images/spritesheet.png');
    background-position: -182px -20px ;
}

.shottower{
    background-repeat: no-repeat;
    background-size: 360px 1886px;
    background-image: url('images/spritesheet.png');
    background-position: -182px -275px ;
}

.rowhouse{
    background-repeat: no-repeat;
    background-size: 360px 1886px;
    background-image: url('images/spritesheet.png');
    background-position: -74px -275px ;
}

.bromo{
    background-repeat: no-repeat;
    background-size: 360px 1886px;
    background-image: url('images/spritesheet.png');
    background-position: -74px -146px ;
}

.patterson{
    background-color: green;
    background-repeat: no-repeat;
    background-size: 360px 1886px;
    background-image: url('images/spritesheet.png');
    background-position: -74px -20px ;
}



.squeeze{
  animation-name: squeeze;
  animation-duration: .25s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes squeeze {
  from{
    /* width: 100%; */
    transform: rotateY(0deg);
  }
  to{
    /* width:1%; */
      transform: rotateY(90deg);
  }
 } /* end @keyframes squeeze */


.expand{
  animation-name: expand;
  animation-duration: .35s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes expand {
  from{
    /* width: 100%; */
    transform: rotateY(90deg);
  }
  to{
    /* width:1%; */
      transform: rotateY(0deg);
  }
} /* end @keyframes squeeze */


button.reset{
  padding: 1em;
  width: 80%;
  margin: 20px auto;
  left: 30px;
  position: relative;
  border-radius: 100px;
  cursor: pointer;
  background-color: #0d1c55;
  border: none !important;
  color: white;
  /* border:2px solid aquamarine; */
}

.overlay{
  /* display: none; */
  position: absolute;
  width: 300px;
  height: 460px;
  background-color: #df9a55;
  border:2px solid white;
  top: 90px;
  left: 30px;
  border-radius: 12px;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,.5));
  transition: opacity .5s;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.overlay .content{
  padding-bottom:40px;
}

.overlay .message{
  width: 250px;
  height:165px;
  display:block;
  margin: 0 auto;
  background-image: url("images/spritesheet.png");
  background-repeat: no-repeat;
  background-size: 360px 1886px;
  
}

.overlay .message.level01{
  background-position: -60px -1200px;
}

.overlay .message.level02{
  background-position: -60px -1365px;
}

.overlay .message.level03{
  background-position: -60px -1533px;
}

.overlay p.your-score{
  color: white;
  text-align: center;
}

.hide{
    display: none;
    opacity: 0;
}

.show{
  display: block;
  opacity: 0;
}

.show-score{
  display: flex;
  opacity: 0;
}

.fade_up{
    animation-name: fade_up_overlay;
    animation-duration: .35s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

/* for overlay_box */
@keyframes fade_up_overlay { 
  from {opacity:0; top: 100px;}
  to {opacity:1; top: 85px;}
}

.faded{
  opacity: .5;
}

.the-timer{
  position: absolute;
  width:60px;
  height: 60px;
  border-radius: 50px;
  background-color: #e47249;
  color: white;
  left: 150px;
  top: 570px;
  display: flex;
  flex-direction: column;
   justify-content: center;

}

.the-timer p{
  text-align: center;
  font-size: 20px;
  margin-right: 4px;
  font-weight: bold;
 
}