:root{--green: #6aaa64;--yellow: #c9b458;--grey: #787c7e;--border: #DDD;--border-filled: #999;--key: #eee;--key-hover: #00aa55}*{margin:0;padding:0;font-family:outfit,Arial,Helvetica,sans-serif;-webkit-user-select:none;user-select:none}h1{text-align:center;font-size:1.5em;font-weight:800;margin-top:3rem;margin-bottom:3rem}#whole{display:flex;flex-direction:column}.line{display:flex;flex-direction:row;justify-content:center}.box{background-color:#fff;border-color:var(--border);border-width:.15em;border-style:solid;width:4rem;height:4rem;display:flex;justify-content:center;align-items:center;margin:.25em}.box>p{font-size:2em;font-weight:800;color:#000}.keyboard{margin-top:3rem;font-size:1.5em}.keyboardRow{text-align:center}.keyboardRow>button{border:none;font-size:inherit;color:inherit;box-sizing:content-box;font-family:Arial,sans-serif;font-weight:600;background-color:var(--key);display:inline-flex;justify-content:center;align-items:center;margin:.25rem;padding:.5rem;width:1.75rem;height:3rem;border-radius:.25rem;transition:scale .2s ease,color .2s ease}@media(hover:hover){.keyboardRow>button:hover{scale:1.1;color:var(--key-hover)}}.keyboardRow>button.pressed{scale:1.1;color:var(--key-hover)}.keyboardRow>button:active{scale:.85}.keyboardRow>.wideKeys{width:4.5rem}#message{text-align:center;font-weight:700;height:1.5em;margin-top:-1.5rem;margin-bottom:1.5rem}#countdown{text-align:center;font-weight:700;color:var(--grey);height:1.5em;margin:1.5rem 0}main{min-height:100vh;min-height:100dvh}footer{text-align:center;font-size:.75rem;font-weight:300;color:var(--grey);margin-bottom:1.5rem}.disclaimer{font-size:.65rem;max-width:32rem;margin:.5rem auto 0;padding:0 1rem;line-height:1.4}.disclaimer a,.disclaimer a:visited,.disclaimer a:hover,.disclaimer a:active{color:var(--grey);-webkit-text-fill-color:var(--grey);-webkit-tap-highlight-color:transparent}.disclaimer+.disclaimer{margin-top:1rem}.signature{margin-top:1.5rem}.box.filled{border-color:var(--border-filled);animation:pop .1s ease-out}.box.flip{animation:flip .5s ease-in-out}@keyframes pop{50%{scale:1.1}}@keyframes flip{50%{transform:rotateX(90deg)}}.box.correct,.keyboardRow>button.correct{background-color:var(--green);border-color:var(--green);color:#fff}.box.present,.keyboardRow>button.present{background-color:var(--yellow);border-color:var(--yellow);color:#fff}.box.absent,.keyboardRow>button.absent{background-color:var(--grey);border-color:var(--grey);color:#fff}.box.correct>p,.box.present>p,.box.absent>p{color:#fff}.line.shake{animation:shake .4s ease-in-out}@keyframes shake{0%,to{translate:0}20%,60%{translate:-.5rem}40%,80%{translate:.5rem}}@media(max-width:600px){h1{margin-top:1rem;margin-bottom:2rem}#message{margin-bottom:.5rem}.box{width:min(4rem,15vw,7vh);height:min(4rem,15vw,7vh);margin:.2rem}.box>p{font-size:1.75em}.keyboard{margin-top:1rem;font-size:1.1rem;padding:0 .25rem}.keyboardRow{display:flex;justify-content:center;max-width:500px;margin:0 auto}.keyboardRow>button{flex:0 0 calc(10% - .3rem);width:auto;height:3.25rem;padding:0;margin:.15rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.keyboardRow>.wideKeys{flex:1 1 0;width:auto;font-size:.75rem}#countdown{margin:.75rem 0}}