*,:after,:before{box-sizing:border-box;font-family:Arial,sans-serif}body{background-color:#111112;display:flex;flex-direction:column;font-size:clamp(.5rem,2.5vmin,1.5rem);margin:0;min-height:95vh}h1{font-size:5rem;margin-bottom:.05em;margin-top:.05em}h1,h2,h3{color:#fff;text-align:center}.keyboard{display:grid;gap:.25em;grid-auto-rows:3em;grid-template-columns:repeat(20,minmax(auto,1.25em));justify-content:center}@media (max-width:1024px){body{padding:1em}.keyboard{gap:.5em;grid-auto-rows:5em;grid-template-columns:repeat(20,minmax(auto,2em));margin-bottom:2.5rem}}@media (min-width:2000px){body{padding:1em}h1{margin-top:4rem}.guess-grid .row{margin-bottom:.75em}}.key{fill:#fff;align-items:center;background-color:hsl(var(--hue,200),var(--saturation,1%),calc(var(--lightness-offset, 0%) + var(--lightness, 51%)));border:none;border-radius:.25em;color:#fff;cursor:pointer;display:flex;font-size:inherit;grid-column:span 2;justify-content:center;padding:0;text-transform:uppercase;user-select:none}.key.large{grid-column:span 3}.key>svg{height:1.75em;width:1.75em}.key:focus,.key:hover{--lightness-offset:10%}.key.wrong{--lightness:23%}.key.wrong-location{--hue:49;--saturation:51%;--lightness:47%}.key.correct{--hue:115;--saturation:29%;--lightness:43%}.guess-grid{flex-grow:1;gap:.25em;grid-template-columns:repeat(1,4em);grid-template-rows:repeat(6,4em)}.guess-grid .row{align-content:center;display:grid;gap:.25em;grid-template-columns:repeat(7,4em);grid-template-rows:repeat(1,4em);justify-content:center;margin-bottom:.25em}.tile{align-items:center;border:.05em solid #39393c;color:#fff;display:flex;font-size:2em;font-weight:700;justify-content:center;text-transform:uppercase;transition:transform .25s linear;user-select:none}.tile[data-state=active]{border-color:#565758}.tile[data-state=wrong]{background-color:#39393c;border:none}.tile[data-state=wrong-location]{background-color:#b59f3b;border:none}.tile[data-state=correct]{background-color:#538d4e;border:none}.tile.shake{animation:shake .25s ease-in-out}.tile.dance{animation:dance .5s ease-in-out}.tile.flip{transform:rotateX(90deg)}@keyframes shake{10%{transform:translateX(-5%)}30%{transform:translateX(5%)}50%{transform:translateX(-7.5%)}70%{transform:translateX(7.5%)}90%{transform:translateX(-5%)}to{transform:translateX(0)}}@keyframes dance{20%{transform:translateY(-50%)}40%{transform:translateY(5%)}60%{transform:translateY(-25%)}80%{transform:translateY(2.5%)}90%{transform:translateY(-5%)}to{transform:translateY(0)}}.alert-container{align-items:center;display:flex;flex-direction:column;left:50vw;position:fixed;top:10vh;transform:translateX(-50%);z-index:1}.alert{background-color:#d6d9db;border-radius:.25em;margin-bottom:.5em;opacity:1;padding:.75em;pointer-events:none;transition:opacity .5s ease-in-out}.alert:last-child{margin-bottom:0}.alert.hide{opacity:0}