*{margin:0;box-sizing:border-box}:root{--dark-primary: #082f49;--light-primary: #f0f9ff;--light-secondary: #cbd5e1;--accent: #fde68a;--btn-disabled: #a8a29e;--btn-winning: green}body{font-family:Inter,sans-serif;background:var(--dark-primary);color:var(--light-primary);text-align:center;min-height:100vh}main{display:flex;flex-direction:column;align-items:center;gap:1em;height:100%;min-height:100vh;padding:1em}.wrapper{display:flex;flex-direction:column;gap:1.5em;background-color:var(--light-secondary);color:var(--dark-primary);border-radius:.5em}.wrapper--accent{padding:2em 3em;border:1px solid var(--dark-primary);box-shadow:0 0 5px 2px var(--light-primary)}.game-over{position:absolute;top:10%;margin:auto;z-index:1;background-image:linear-gradient(red,orange,#ff0,green,#00f,indigo,violet)}h1{color:var(--accent);font-size:2.25rem;letter-spacing:2px;text-transform:uppercase;margin:0}.p--large{font-size:1.5rem}.p--regular{font-size:1.125em}.btn{background-color:var(--light-primary);color:var(--dark-primary);font-family:inherit;border:2px solid var(--dark-primary);border-radius:.5em;cursor:pointer}.btn--text{background-color:var(--dark-primary);color:var(--light-primary);font-size:1.25rem;width:max-content;margin:0 auto;padding:.25em .75em}.btn--invert{background-color:var(--light-primary);color:var(--dark-primary);font-size:1.25rem;width:max-content;margin:0 auto;padding:.25em .75em;border-radius:.5em;cursor:pointer;border:2px solid var(--dark-primary)}.btn--emoji{width:100%;height:100px;font-size:3rem;border:2px solid var(--light-primary)}.btn--text:hover,.btn--text:focus{background-color:var(--light-primary);color:var(--dark-primary);box-shadow:0 0 5px 1px var(--dark-primary)}.form-container{display:flex;flex-direction:column;gap:1em;text-align:start}form{gap:2em;font-size:1.125rem;padding:.5em;border-radius:.5em}.form__inner-wrapper{display:flex;flex-direction:column;gap:.5em}select{background-color:var(--dark-primary);color:var(--light-primary);font-family:inherit;padding:.5em;border:1px solid var(--dark-primary);border-radius:.5em;cursor:pointer}select:hover,select:focus{background-color:var(--light-primary);color:var(--dark-primary);box-shadow:0 0 2px 1px var(--dark-primary)}.card-container{padding-left:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1em;width:90vw;max-height:80dvh}.card-item{list-style:none}.card-item--selected,.card-item--matched,.btn--emoji__back--selected,.btn--emoji__back--matched{transform:rotateY(180deg)}.card-item--selected{transition:.6s;transform-style:preserve-3d}.btn--emoji__front,.btn--emoji__back--selected{backface-visibility:hidden}.btn--emoji__back--matched{backface-visibility:unset;background-color:var(--btn-winning);border:2px solid var(--btn-disabled);cursor:not-allowed}.btn--emoji__front:hover,.btn--emoji__front:focus{background-color:var(--accent);border:2px solid var(--dark-primary);box-shadow:0 0 5px 2px var(--light-primary);cursor:pointer}.card-item--selected .btn--emoji__back--selected{border:2px solid var(--dark-primary);box-shadow:0 0 5px 2px var(--light-primary)}.sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}@media (min-width: 768px){.btn--emoji{font-size:15dvh;padding:10px}.card-container{grid-template-columns:repeat(5,minmax(110px,1fr))}}@media (min-width: 1024px){h1{font-size:3.25rem}.game-over{position:static;margin:inherit}.btn--emoji{font-size:4.5rem;height:125px}.card-container{grid-template-columns:repeat(5,minmax(125px,1fr))}}