* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   height: 100vh;
   background: #74ebd5;
   background: -webkit-linear-gradient(to right, #acb6e5, #74ebd5);
   background: linear-gradient(to right, #acb6e5, #74ebd5);
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

#heading {
   text-align: center;
   padding-bottom: 0.3rem;
}

#playAgain {
   display: none;
   border-radius: 5px;
   padding: 0.1rem 0.3rem;
   box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
   color: bisque;
   background-color: rgb(23, 68, 218);
   margin-bottom: 0.1rem;
}
section {
   display: grid;
   justify-content: center;
   grid-template-columns: repeat(4, 16vw);
   grid-template-rows: repeat(4, 16vw);
   grid-gap: 1vh;
   perspective: 800px;
}
.card {
   position: relative;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;
}
.face,
.back {
   width: 100%;
   height: 100%;
   position: absolute;
   pointer-events: none;
}
.back {
   background-color: beige;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   backface-visibility: hidden;
}
.face {
   background-color: beige;
   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
   backface-visibility: visible;
}

.toggleCard {
   -webkit-transform-origin-y: 180deg;
   transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
}

@media screen and (min-width: 600px) {
   section {
      grid-template-columns: repeat(4, 15vh);
      grid-template-rows: repeat(4, 15vh);
      grid-gap: 1vh;
   }
}
@media screen and (max-height: 320px) {
   section {
      grid-template-columns: repeat(4, 15vh);
      grid-template-rows: repeat(4, 15vh);
      grid-gap: 1vh;
   }
}