*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins}html{min-height:100vh}body{background-color:#d6e0f0}h1{text-align:center;color:#393b44;margin:20px 0;font-size:3rem}.game{perspective:1000px;grid-template-columns:repeat(4,auto);justify-content:center;gap:10px;margin:40px;display:grid}.game__info{color:#30475e;grid-column:1/-1;justify-content:space-between;align-items:center;font-size:2rem;display:flex}.game__card{width:125px;height:175px;cursor:pointer;transform-style:preserve-3d;position:relative}.game__card.visible,.game__card.matched{cursor:default}.game__card.matched .card__face .card__value{animation-name:dance;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:.5s}@keyframes dance{0%,to{transform:rotate(0)}25%{transform:rotate(-30deg)}75%{transform:rotate(30deg)}}.card__face{width:100%;height:100%;backface-visibility:hidden;will-change:transfrom;border-radius:5px;justify-content:center;align-items:center;transition:transform .5s ease-in-out;display:flex;position:absolute}.card__back{background-color:teal}.card__front{background-color:#483d8b;transform:rotateY(-180deg)}.game__card.visible .card__back{transform:rotateY(180deg)}.game__card.visible .card__front{z-index:1;transform:rotateY(0)}.card__face img{max-width:100px}.card__back img,.card__front .card__value{transition:transform .3s}.card__back:hover img{transform:rotate(7deg)}.card__front:hover .card__value{transform:scale(1.1)}.gotcha{pointer-events:none;display:none;position:fixed;top:50%;left:50%;translate:-50% -50%}.gotcha.match{animation-name:getMatch;animation-duration:1s;animation-timing-function:ease-in-out;display:block}@keyframes getMatch{0%{opacity:0;transform:scale(0)translateY(-40%)}50%{opacity:1;transform:scale(1)translateY(-50%)}to{opacity:0;transform:scale(0)translateY((-40%))}}.gotcha img{max-width:200px}footer{width:100%;flex-wrap:wrap;justify-content:space-around;align-items:center;padding:30px 0;display:flex}footer>div{text-align:center;margin:20px}footer a{color:#483d8b;font-weight:600;text-decoration:none}@media screen and (max-width:600px){.game{grid-template-columns:repeat(4,auto);margin:10px}.game__info{font-size:1.3rem}.game__card{width:80px;height:80px}.card__face img{max-width:60%}.gotcha img{max-width:100px}h1{font-size:1.6rem}}
/*# sourceMappingURL=index.ec337634.css.map */