body,html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}a{color:inherit;text-decoration:none}a:focus,a:hover{color:#2396ed}*{box-sizing:border-box}main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:0 .5rem}.nav-header{padding:1rem}@media (min-width:640px){.nav-header{position:fixed;top:0;left:0;width:100%}}.keyboard-grid-container{display:grid;grid-template-areas:"esc f1 f2 f3 f4 f5 f6 f7 f8 f9 f10 f11 f12 . ." "backquote one two three four five six seven eight nine zero minus equal backspace backspace" "tab tab q w e r t y u i o p left-bracket right-bracket backslash" "caps caps a s d f g h j k l semicolon quote enter enter" "left-shift left-shift z x c v b n m comma period forwardslash right-shift right-shift right-shift" "fn left-ctrl alt-left meta-left space space space space space space meta-right alt-right arrow-left arrow-up-down arrow-right";grid-gap:10px;background-color:#99a8b4;padding:10px;margin:1rem;border-radius:.5rem}.keyboard-grid-container>div{text-align:center;padding:10px;font-size:20px;border-radius:.5rem}.not-passed{background-color:#ab4e4e}.passed{background-color:#09cd09}.escape{grid-area:esc}.f1{grid-area:f1}.f2{grid-area:f2}.f3{grid-area:f3}.f4{grid-area:f4}.f5{grid-area:f5}.f6{grid-area:f6}.f7{grid-area:f7}.f8{grid-area:f8}.f9{grid-area:f9}.f10{grid-area:f10}.f11{grid-area:f11}.f12{grid-area:f12}.backquote{grid-area:backquote}.one-key{grid-area:one}.two-key{grid-area:two}.three-key{grid-area:three}.four-key{grid-area:four}.five-key{grid-area:five}.six-key{grid-area:six}.seven-key{grid-area:seven}.eight-key{grid-area:eight}.nine-key{grid-area:nine}.zero-key{grid-area:zero}.minus-key{grid-area:minus}.equal-key{grid-area:equal}.backspace{grid-area:backspace}.tab{grid-area:tab}.q-key{grid-area:q}.w-key{grid-area:w}.e-key{grid-area:e}.r-key{grid-area:r}.t-key{grid-area:t}.y-key{grid-area:y}.u-key{grid-area:u}.i-key{grid-area:i}.o-key{grid-area:o}.p-key{grid-area:p}.left-bracket-key{grid-area:left-bracket}.right-bracket-key{grid-area:right-bracket}.enter{grid-area:enter}.caps-lock{grid-area:caps}.a-key{grid-area:a}.s-key{grid-area:s}.d-key{grid-area:d}.f-key{grid-area:f}.g-key{grid-area:g}.h-key{grid-area:h}.j-key{grid-area:j}.k-key{grid-area:k}.l-key{grid-area:l}.semicolon-key{grid-area:semicolon}.quote-key{grid-area:quote}.backslash{grid-area:backslash}.left-shift{grid-area:left-shift}.z-key{grid-area:z}.x-key{grid-area:x}.c-key{grid-area:c}.v-key{grid-area:v}.b-key{grid-area:b}.n-key{grid-area:n}.m-key{grid-area:m}.comma-key{grid-area:comma}.period-key{grid-area:period}.forwardslash{grid-area:forwardslash}.right-shift{grid-area:right-shift}.fn{grid-area:fn;background-color:#f0f8ff}.left-ctrl{grid-area:left-ctrl}.alt-left{grid-area:alt-left}.meta-left{grid-area:meta-left}.space{grid-area:space}.meta-right{grid-area:meta-right}.alt-right{grid-area:alt-right}.arrow-left{grid-area:arrow-left}div.arrow-up-down{grid-area:arrow-up-down;display:flex;flex-direction:column;justify-content:space-between;padding:0}.arrow-up-down>div{border-radius:.5rem}.arrow-right{grid-area:arrow-right}.arrow-down,.arrow-up{max-height:22px}.reset-button{background-color:#ff7a0b}.reset-button:hover{background-color:#eb6a00}