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