html{height:100%}body{margin:0;background:#fff}
.splash{position:absolute;background-repeat:no-repeat;background-position:center;z-index:999;background-image:url('images/splash.png');background-color:#fff;background-size:contain;width:100vw;height:100vh;transition:all 1s linear;pointer-events:none}
.title{position:absolute;left:0;top:0;font-size:.75em;font-family:Calibri,Arial,sans-serif;color:#303030;padding:.5em;z-index:99}
.question{margin:auto;text-align:center;position:relative;width:max-content;height:max-content}
.answers{margin:auto;display:flex;flex-direction:column;width:max-content;position:relative}
input[type=radio]{display:none}
label.answer{position:absolute;width:100px;height:102px;cursor:pointer;background:blue;filter:brightness(50%) sepia(100) saturate(100) hue-rotate(240deg);opacity:0}
label.answer:hover{opacity:.15}
input[type=radio]:checked+label{opacity:.65;filter:brightness(50%) sepia(100) saturate(100) hue-rotate(200deg)}
label[for^=answer_]{top:382px}
label[for=answer_1]{left:78px}
label[for=answer_2]{left:calc(76px + 100px + 30px)}
label[for=answer_3]{left:calc(78px + calc(100px + 30px) * 2)}
label[for=answer_4]{left:calc(78px + calc(100px + 30px) * 3)}
label[for=answer_5]{left:calc(78px + calc(100px + 30px) * 4)}
.navigation{padding:2em;margin:auto;width:max-content;text-align:center;justify-content:space-between}
.navigation button{font-size:2em;padding:.25em .5em}
#score{font-size:2em;padding:.25em .5em;margin:auto;display:block}
div.score{display:none}
.score,.output{margin:auto;width:50%;padding:.25em .5em;font-family:Arial,sans-serif}
.output{font-size:2em;text-align:center}
.number{margin:auto;text-align:center;color:grey;font-family:Arial,sans-serif;width:max-content;font-size:.8em;padding:.25em}