@import"https://fonts.googleapis.com/css?family=Faster+One|Monoton";html{font-size:100%}body{width:100%;height:100%;background:#40e0d0;margin:0;padding-top:1rem}.container{max-width:900px;margin:0 auto;display:flex;justify-content:center}body:before{position:fixed;top:0;left:0;width:100%;height:100%;content:"";z-index:-1;background-image:-moz-linear-gradient(top left,rgba(64,224,208,.6),rgba(0,139,139,.6));background-image:-ms-linear-gradient(top left,rgba(64,224,208,.6),rgba(0,139,139,.6));background-image:-webkit-linear-gradient(top left,rgba(64,224,208,.6),rgba(0,139,139,.6));background-image:-o-linear-gradient(top left,rgba(64,224,208,.6),rgba(0,139,139,.6));background-image:linear-gradient(to bottom right,#40e0d099,#008b8b99);background-size:auto}h1{color:#fff;font-family:Monoton,cursive;font-size:clamp(1.75rem,8vw,4.375rem);text-shadow:.125rem .125rem .625rem #1D2671,.25rem .25rem .9375rem #C33764}.row{width:100%}h1{text-align:center;margin:0}.info{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.75rem 1.5rem;margin:.5rem 0 1.25rem;color:#fff;font-family:sans-serif;font-size:1.25rem}.info button{padding:.5rem 1rem;font-size:1rem;border:none;border-radius:.3125rem;cursor:pointer;color:#fff;background:#1d2671}.info button:hover{background:#c33764}ul{perspective:37.5rem;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,var(--card-size));gap:var(--gap);justify-content:center}:root{--gap: 1.25rem;--card-size: min(9rem, calc((100vw - 2rem - 3 * var(--gap)) / 4))}li{width:var(--card-size);height:var(--card-size);list-style:none;position:relative;cursor:pointer;counter-increment:item;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}li div{width:100%;height:100%;position:absolute;border-radius:.3125rem;transition:all .5s;backface-visibility:hidden;box-shadow:.3125rem .3125rem .625rem #0000004d}li img{width:100%;height:100%;position:absolute;border-radius:.3125rem}li img{object-fit:cover;pointer-events:none;-webkit-user-drag:none}@media (hover: hover){li:hover .front{z-index:0;transform:rotateY(180deg)}li:hover .back{transform:rotateY(0)}}li.peek .front,li.flipped .front,li.matched .front{z-index:0;transform:rotateY(180deg)}li.peek .back,li.flipped .back,li.matched .back{transform:rotateY(0)}li.matched{cursor:default;opacity:.6}.front{z-index:3;color:#fff;text-align:center;line-height:var(--card-size);font-size:calc(var(--card-size) * .4);font-family:Faster One,cursive;background:#000}.front:after{content:counter(item)}.back{transform:rotateY(180deg)}@media (max-width: 700px){:root{--gap: .75rem}.container{max-width:none;padding:0 1rem}.info{font-size:1rem}}