@keyframes matchAnim{0%{background:yellow}33%{background:purple}67%{background:orangered}to{background:green}}.memory-card.matched .front-face{-webkit-animation:matchAnim 1s ease-in-out;animation:matchAnim 1s ease-in-out;-webkit-animation-delay:.4s;animation-delay:.4s;background-color:green;cursor:not-allowed}.memory-game,.memory-game-wrapper{max-width:720px}.memory-game{height:70vh;display:flex;flex-wrap:wrap;perspective:1000px}.memory-card{width:calc(20% - 10px);margin:5px;position:relative;transform:scale(1);transform-style:preserve-3d;transition:transform .5s;box-shadow:1px 1px 1px rgba(0,0,0,.3);cursor:pointer;border-radius:12px}.memory-card:active{transform:scale(.97);transition:transform .2s}.memory-card.flip{transform:rotateY(180deg);cursor:not-allowed}.back-face,.front-face{width:100%;height:100%;padding:4px;position:absolute;background:#30336b;border-radius:12px;backface-visibility:hidden;text-align:center}.front-face{transform:rotateY(180deg);color:#fff}@media (max-width:720px){.memory-card{width:calc(25% - 10px)}}@media (max-width:480px){.memory-card{width:calc(33% - 10px)}}