html{overflow:hidden;background-color:#ffefd5}#root{width:100vw;height:100vh;place-content:center}#root,.game{display:grid}.game{grid-template-columns:repeat(4,4rem);grid-template-rows:repeat(5,4rem);grid-gap:1rem}button{grid-column:1/-1}.card{position:relative;perspective:10rem;-moz-user-select:none;user-select:none}.card.rotated .front{transform:rotateY(180deg)}.card.rotated .back{transform:rotateY(1turn)}.card.matched .back,.card.matched .front{box-shadow:none}.card.matched .back .icon,.card.matched .front .icon{color:rgba(0,0,0,.31)}.card .back,.card .front{display:grid;place-content:center;position:absolute;width:100%;height:100%;transition:transform .5s;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #000;border-radius:.25rem;box-shadow:1px 2px 2px #000;text-align:center}.card .back .count,.card .back .icon,.card .front .count,.card .front .icon{grid-area:1/1/-1/-1}.card .back .count,.card .front .count{position:absolute;height:100%;width:100%;margin-top:-.25rem;color:#fff;text-shadow:0 0 15px #000,2px 2px 0 silver;font-weight:bolder}.card .front{content:"";background-color:azure;background-image:url(duck.ac36df0f.svg);background-position:50%;background-size:auto 3.5rem;background-repeat:no-repeat}.card .back{font-size:3.5rem;transform:rotateY(180deg);background-color:hsl(var(--hue),100%,75%)}