*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}h1,h2,h3,h4{display:block}p{color:#cedef6;font-size:medium;font-weight:200;line-height:1.25em;margin:10px 0}body{background-color:#f7f3d5;color:#768eb2;font-family:Arial,Helvetica,sans-serif;margin:0}.hidden{opacity:0;visibility:hidden}.blur{-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px)}#container{align-items:center;display:flex;height:100%;justify-content:center}#container.failed .keys,#container.passed .keys{opacity:1}#container.failed{background:#fe495f;color:#fff;transition-timing-function:ease-in-out}#container.passed{background:#bded7e;color:#3e4f68}#errorMessage{color:#fe495f;font-size:1.5rem}#text{text-align:center}#text .target .note{font-size:15vw;font-weight:700;vertical-align:middle}#text .subtext{font-size:8vw;font-weight:400;margin-top:-3vw}#text .notes{font-size:3vw;opacity:0}#text .notes.visible{opacity:1}#nextButton{text-wrap:nowrap;margin:0 auto;padding:10px 50px;width:200px}.keys{display:block;display:flex;flex-direction:row;height:150px;margin:20px auto 0;max-width:880px;opacity:0;width:500px}.key,.keys{position:relative}.key{border:1px solid #000;border-radius:0 0 .3rem .3rem;box-sizing:border-box;flex-grow:1}.key:not(.sharp){background:hsla(0,0%,100%,.8);height:100%}.key.sharp{background:#000;color:#eee;height:60%;left:-100%;position:absolute;top:0;width:5%;z-index:3}.key.on{background:#8ab9ff}.key.incorrect{background:#fe495f}.key.correct{background:#bded7e}.key[data-key="1"]{left:4.642857142857143%}.key[data-key="3"]{left:11.785714285714286%}.key[data-key="6"]{left:26.071428571428573%}.key[data-key="8"]{left:33.214285714285715%}.key[data-key="10"]{left:40.35714285714286%}.key[data-key="13"]{left:54.642857142857146%}.key[data-key="15"]{left:61.78571428571429%}.key[data-key="18"]{left:76.07142857142857%}.key[data-key="20"]{left:83.21428571428572%}.key[data-key="22"]{left:90.35714285714286%}.modal{background:#3e4f68;border-radius:1rem 1rem;clear:both;color:#fff;display:flex;flex-direction:column;padding:20px;position:absolute;width:500px}#testSelector h2{margin-bottom:20px}#testSelector .checkboxes{display:flex;flex-wrap:wrap;margin:10px}#testSelector .checkboxes input{margin-right:5px}#testSelector .checkboxes div{flex-direction:row;margin:5px 10px;width:12%}#testSelector .options{flex-direction:column}#testSelector .options div{width:auto}.modal .submit button{background:#fff;border:none;border-radius:.3rem;color:#3e4f68;cursor:pointer;float:right;padding:10px 30px}#optionsPanel{position:absolute;right:20px;top:10px}.button{background:#768eb2;border-radius:.3rem;color:#fff;cursor:pointer;display:block;margin:10px 0;padding:10px 50px;position:relative;text-align:center;text-decoration:none}#optionsPanel a:hover{text-decoration:underline}#about img.inline{border-radius:50%;float:right;margin-left:10px}