*{
     box-sizing: border-box;
}
html{
     min-height: 100vh;
}
body{
     margin:0;
     background-image: url('https://images.pexels.com/photos/998641/pexels-photo-998641.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
     font-family: 'Montserrat', sans-serif;

}
.page-title{
     color: #fff;
     font-family:sans-serif;
     text-align: center;
     font-size: 6em;
     font-weight: normal;
}
.game-info-container{
     grid-column: 1 / -1;
     display: flex;
     justify-content: space-between;
}
.game-info{
     color: #131516;
     font-size: 4em;
}
.card{
     position: relative;
     height: 175px;
     width: 125px;
     border-radius: 12px;

}
.game-container{
     display: grid;
     grid-template-columns: repeat(4, auto);
     grid-gap: 10px;
     margin: 50px;
     justify-content: center;
     perspective: 500px;
     background: #fff;
     width: 600px;
     margin: auto;
}

.card-face {
     position: absolute;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     backface-visibility: hidden;
     border-radius: 12px;
     border-width: 1px;
     border-style: solid;
     transition: transform 500ms ease-in-out;
}
.card-back{
     background-color: #323232;
     border-color: #fff;
     outline: 1px solid #fff;
 outline-offset: -10px;
}

.card-front{
     background-color: #F5FFFA;
     transform: rotateY(180deg);
     outline: 1px solid #fff;
     outline-offset: -10px;
}

.card.visible .card-back{
     transform: rotateY(-180deg);
}
.card.visible .card-front{
     transform: rotateY(0);
}
.card.matched .card-value{
     animation: dance 1s linear infinite 500ms;
}
@keyframes dance{
     0%, 100%{
          transform: rotate(0);
     }
     25%{
          transform: rotate(-30deg);
     }
     75%{
          transform: rotate(30deg);
     }
}

.fa-brain{
     font-size: 5em;
     color: #fff;
     align-self: auto;
     transform: translateY(-10px);
     transition: transform 100ms ease-in-out;
}
.card-value{
     width: 50%;
     height: auto;
     color: #333;
     align-self: auto;
     transform: translateY(-10px);
     transition: transform 100ms ease-in-out;
     transform: scale(.9);
     transition: 0.5s;
}
.fa-headphones:hover{
     transform: scale(1);
}
.card-back:hover .fa-brain{
     transform: translateY(0);
}
.card-front {
  background-color: #ffffff;
  border-color: #333;
  transform: rotateY(180deg);

}
.overlay-text{
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 100;
     color: #fff;
     cursor: pointer;
}

.overlay-text-small {
  font-size: .3em;
}

.overlay-text.visible{
     display: flex;
     flex-direction: column;
     animation: overlay-grow 500ms forwards;
}
.overlay-text{
     font-size: .3em;
}

@keyframes overlay-grow {
     from {
          background-color: rgba(0, 0, 0, 0);
          font-size: 0;
     }
     to {
          background-color: rgba(0, 0, 0, 0.8);
          font-size: 7em;
     }
}



@media (max-width: 600px) {
     .game-container{
          grid-template-columns: repeat(2, auto);
     }
     .game-info-container{
          flex-direction: column;
          align-items: center;
     }
}