*,:before,:after{box-sizing:border-box}:focus{outline-offset:-2px;outline:2px solid #7ba7bc;box-shadow:0 0 0 4px #ffd100}html{font-size:calc(1em + 1vw);line-height:1.5}@media (width>=1200px){html{font-size:1.375em}}body{color:#53565a;background:#f1f6f8;min-height:100vh;margin:0;font-family:Rubik Mono One,Pathway Gothic One;font-size:1.5em}#app{min-height:100vh}#app.strikeout{animation:1s linear forwards flash_red}.error{padding:1rem}.error h2,.error p{line-height:1}.container{width:100%;max-width:36rem;margin:auto;padding:1rem}.container.loading{justify-content:center;align-items:center;min-height:100vh;display:flex}@media (width>=600px){.container{padding:2rem}}#quote{letter-spacing:.1em;background:#e0ebf0;border:2px solid #53565a;margin:0 0 .5em;padding:1rem 1rem 2rem;font-size:1.25rem;line-height:1.2em;position:relative;box-shadow:4px 4px #7ba7bc}@media (width>=600px){#quote{margin:1em 0 .5em;padding:2rem;font-size:calc(1rem + 1vw)}}#quote.strike{color:#d7dade;background-color:#e4002b}#quote.highlight{background-color:#ffd100;animation:.5s ease-in-out forwards tada}#quote span{margin-right:.75em;display:inline-block}#quote small{font-size:.5em;position:absolute;bottom:.5em;left:2em}#button-board{grid-gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(1.5em,1fr));display:grid}@media (width>=600px){#button-board{grid-template-columns:repeat(auto-fit,minmax(2em,1fr))}}button{width:auto;color:inherit;transform-origin:100% 100%;background:#e0ebf0;border:2px solid #53565a;justify-content:center;align-items:center;padding:.4em .5em .3em;font-family:inherit;font-size:.75em;line-height:1;display:flex;position:relative;overflow:hidden;box-shadow:4px 4px #7ba7bc}@media (width>=600px){button{font-size:1em}}button .background{content:"";z-index:0;transform-origin:bottom;background:#ffd100;width:100%;height:100%;transition:transform .2s cubic-bezier(.75,0,.25,1);position:absolute;bottom:0;left:0;transform:scaleY(0)}button:hover:not(:active):not([disabled]),button:focus:not(:active):not([disabled]){transform:translate(-1px,-1px);box-shadow:6px 6px #7ba7bc}button:not([disabled]):active{transform:translate(2px,2px);box-shadow:0 0 #7ba7bc}button.highlight .background{transform:scaleY(1)}button.strike{color:#d7dade}button.strike .background{background-color:#e4002b}button#new-game{margin-top:1.5rem}@media (width>=600px){button#new-game{margin-top:2rem}}button .letter{z-index:2;color:inherit;font-family:inherit;position:relative}button[disabled]:not(.highlight){border-color:#a7a8aa}button[disabled]:not(.highlight) .letter{color:#a7a8aa}.game-status{z-index:2;color:#53565a;background:#ffd100;border:2px solid;padding:.5em;font-size:.7rem;line-height:1;position:absolute;top:-.8rem;left:-8px}.status{flex-wrap:wrap;align-items:center;margin:1rem 0 .5rem;line-height:1;list-style-type:none;display:flex}.status h2{margin:0;font-size:.9rem}.status ul{margin:0;padding:0;display:flex}.status ul li{margin-left:.25em}.status p{width:100%;margin:0;font-size:1rem}.riser{animation:.3s cubic-bezier(.5,0,.5,1) rise;display:block}.hint{color:#34657f;margin:0 0 1.5rem;padding:0;font-size:.85rem;line-height:1.2}@media (width>=600px){.hint{font-size:1rem}}.spinner{border:4px solid;border-top-color:#0000;border-radius:1em;width:1em;height:1em;animation:1.2s linear infinite rotate;display:inline-block}@keyframes flash_red{0%{background:#e4002b}to{background:0 0}}@keyframes tada{0%{transform:scale(1)}20%{transform:scale(1.1)}40%{transform:scale(.9)}60%{transform:scale(1.05)}80%{transform:scale(1)}to{transform:scale(1)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rise{0%{transform:translateY(0)}44.9%{transform:translateY(-1.5em)}45%{transform:translateY(1.5em)}55%{transform:translateY(1.5em)}0%{transform:translateY(0)}}
