@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap";:root{--size--2: clamp(.6944rem, .6884rem + .0301vw, .7035rem);--size--1: clamp(.8333rem, .7637rem + .348vw, .9377rem);--size-0: clamp(1rem, .8333rem + .8333vw, 1.25rem);--size-1: clamp(1.2rem, .8892rem + 1.5542vw, 1.6663rem);--size-2: clamp(1.44rem, .9193rem + 2.6037vw, 2.2211rem);--size-3: clamp(1.728rem, .9062rem + 4.1091vw, 2.9607rem);--size-4: clamp(2.0736rem, .8249rem + 6.2436vw, 3.9467rem);--size-5: clamp(2.4883rem, .6399rem + 9.242vw, 5.2609rem)}:root{--clr-primary: #57dbff;--clr-accent: #79F77B;--clr-warning: #f21e65;--clr-neutral-dark: #07213C;--clr-neutral-light: #fff}:root{--font-family-base: "Orbitron", serif}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}img,picture,svg{display:block;max-width:100%}body{line-height:1.5;font-family:var(--font-family-base);color:var(--clr-neutral-light);font-size:var(--size-1);font-weight:700;background-image:url(/memory/images/stars.jpeg);text-shadow:-2px 2px 0 var(--clr-neutral-dark),2px 2px 0 var(--clr-neutral-dark),2px -2px 0 var(--clr-neutral-dark),-2px -2px 0 var(--clr-neutral-dark)}@supports (background-image: url(/images/stars.webp)){body{background-image:url(/memory/images/stars.webp)}}:root{--border-radius-1: .5rem;--grid-gap: clamp(.75rem, .4741rem + 1.3793vw, 1.25rem)}.main-nav{display:flex;justify-content:space-between;gap:var(--size--1)}.main-content{display:flex;flex-direction:column}.title{font-size:var(--size-5);text-align:center;color:var(--clr-primary)}.btn{color:var(--clr-neutral-dark);border:none;padding:.5rem var(--size-1);border-radius:var(--border-radius-1);align-self:center;cursor:pointer;background-color:var(--clr-accent)}.btn:hover{background-color:var(--clr-primary)}.user-form{display:block;margin-inline:auto;gap:var(--size-0);max-width:100%;margin-top:var(--size-2)}.user-form input{padding:var(--size--1) var(--size-0);border-radius:var(--border-radius-1);width:100%;text-align:center;color:var(--clr-neutral-dark);border:none}input::placeholder{text-align:center;color:var(--clr-neutral-dark)}.error{text-align:center;color:var(--clr-warning)}#new-game-btn{display:none}.board{margin-block:var(--size-2);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}.card{position:relative}.card__front{position:absolute;border-radius:var(--border-radius-1);transform:rotateY(90deg);transition:all ease-in .2s;border:2px solid var(--clr-neutral-light)}.card__front>*{border-radius:var(--border-radius-1)}.flipped .card__front{transform:rotateY(0);transition-delay:.2s}.card__back{border-radius:var(--border-radius-1);transition:all ease-in .2s;transition-delay:.2s;border:2px solid var(--clr-neutral-light);cursor:pointer;background-color:var(--clr-accent);width:100%;aspect-ratio:1 / 1}.flipped .card__back{transform:rotateY(90deg);transition-delay:0s}:root{--container-max-width: 54rem;--container-padding: var(--size-1) }.container{--max-width: var(--container-max-width);--padding: var(--container-padding);width:min(var(--max-width),100% - (var(--padding) * 2));margin-inline:auto}.flow>*:where(:not(:first-child)){margin-top:var(--flow-spacer, var(--size-1))}
