body {
    font-family: "Ubuntu Mono";
    background-color: #5aead5;
}
#title {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 7dvh;
    width: calc(100dvw - (900dvh / 12));
    height: calc(100dvh / 12);
    font-family: "Orbitron";
    text-align: center;
    text-transform: uppercase;
    background-color: black;
    color: white;
    line-height: 1;
}
#nav {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(100dvw - (900dvh / 12) + (100dvh / 12));
    height: calc(100dvh / 12);
    display: grid;
    grid-template-areas: 
        "y z z w w w w w . x v"
        "a b c d e f g h i j k";
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    z-index: 2;
}
#nav > prev {
    grid-area: x;
    background-color: #c60842;
    pointer-events: all;
}
#nav > nex {
    grid-area: v;
    background-color: #f3e608;
    pointer-events: all;
}
#nav > playpause {
    grid-area: y;
    background-color: #c60842;
    color: white;
    display: none;
    flex-direction: column;
    text-align: center;
    place-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 2dvh;
    cursor: default;
}
#nav > vol {
    grid-area: z;
    background-color: transparent;
    display: none;
    pointer-events: all;
    width: calc((100dvw - (900dvh / 12) + (100dvh / 12)) / 5.5);
    height: calc(100dvh / 24);
}
#nav > trackname {
    grid-area: w;
    background-color: #f3e608;
    color: black;
    font-size: 3dvh;
    text-align: center;
    display: none;
    pointer-events: none;
    vertical-align: middle;
    justify-content: center;
    flex-direction: column;
}
#nav > index {
    grid-area: a;
    background-color: white;
    cursor: pointer;
}
#nav > aud {
    grid-area: b;
    background-color: #c60842;
    cursor: pointer;
}
#nav > meatspace {
    grid-area: c;
    background-color: black;
    cursor: pointer;
}
#nav > pixel {
    grid-area: d;
    background-color: black;
    cursor: pointer;
}
#nav > links {
    grid-area: e;
    background-color: #c60842;
    cursor: pointer;
}
#nav > metsa {
    grid-area: f;
    background-color: #f3e608;
    cursor: pointer;
}
#nav > rules {
    grid-area: g;
    background-color: #c60842;
    cursor: pointer;
}
#nav > projects {
    grid-area: h;
    background-color: white;
    cursor: pointer;
}
#nav > archive {
    grid-area: i;
    background-color: white;
    cursor: pointer;
}
#nav > changelog {
    grid-area: j;
    background-color: black;
    cursor: pointer;
}
#nav > sitemap {
    grid-area: k;
    background-color: #c60842;
    cursor: pointer;
}
#qtable {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    width: calc(900dvh / 12);
    height: 100dvh;
    grid-template-areas:
        "q1 q2 q3 q4 q5 q6 q7 q8 q9"
        "q10 q11 q12 q13 q14 q15 q16 q17 q18"
        "q19 q20 q21 q22 q23 q24 q25 q26 q27"
        "q28 q29 q30 q31 q32 q33 q34 q35 q36"
        "q37 q38 q39 q40 q41 q42 q43 q44 ."
        "q45 q46 q47 q48 q49 q50 q51 q52 ."
        "q53 q54 q55 q56 q57 q58 q59 q60 ."
        "q61 q62 q63 q64 q65 q66 q67 q68 ."
        "q69 q70 q71 q72 q73 q74 q75 q76 ."
        "q77 q78 q79 q80 q81 q82 q83 q84 ."
        "q85 q86 q87 q88 q89 q90 q91 q92 ."
        "q93 q94 q95 q96 q97 q98 q99 q100 .";
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
#qtable > q1 {
    grid-area: q1;
    background-color: #5aead5;
}
#qtable > q2 {
    grid-area: q2;
    background-color: black;
}
#qtable > q3 {
    grid-area: q3;
    background-color: black;
}
#qtable > q4 {
    grid-area: q4;
    background-color: white;
}
#qtable > q5 {
    grid-area: q5;
    background-color: #f3e608;
}
#qtable > q6 {
    grid-area: q6;
    background-color: white;
}
#qtable > q7 {
    grid-area: q7;
    background-color: #5aead5;
}
#qtable > q8 {
    grid-area: q8;
    background-color: #f3e608;
}
#qtable > q9 {
    grid-area: q9;
    background-color: white;
}
#qtable > q10 {
    grid-area: q10;
    background-color: white;
}
#qtable > q11 {
    grid-area: q11;
    background-color: #5aead5;
}
#qtable > q12 {
    grid-area: q12;
    background-color: #5aead5;
}
#qtable > q13 {
    grid-area: q13;
    background-color: #f3e608;
}
#qtable > q14 {
    grid-area: q14;
    background-color: black;
}
#qtable > q15 {
    grid-area: q15;
    background-color: #5aead5;
}
#qtable > q16 {
    grid-area: q16;
    background-color: #f3e608;
}
#qtable > q17 {
    grid-area: q17;
    background-color: #f3e608;
}
#qtable > q18 {
    grid-area: q18;
    background-color: black;
}
#qtable > q19 {
    grid-area: q19;
    background-color: black;
}
#qtable > q20 {
    grid-area: q20;
    background-color: #f3e608;
}
#qtable > q21 {
    grid-area: q21;
    background-color: white;
}
#qtable > q22 {
    grid-area: q22;
    background-color: black;
}
#qtable > q23 {
    grid-area: q23;
    background-color: #5aead5;
}
#qtable > q24 {
    grid-area: q24;
    background-color: black;
}
#qtable > q25 {
    grid-area: q25;
    background-color: #f3e608;
}
#qtable > q26 {
    grid-area: q26;
    background-color: #5aead5;
}
#qtable > q27 {
    grid-area: q27;
    background-color: white;
}
#qtable > q28 {
    grid-area: q28;
    background-color: white;
}
#qtable > q29 {
    grid-area: q29;
    background-color: white;
}
#qtable > q30 {
    grid-area: q30;
    background-color: #5aead5;
}
#qtable > q31 {
    grid-area: q31;
    background-color: black;
}
#qtable > q32 {
    grid-area: q32;
    background-color: #f3e608;
}
#qtable > q33 {
    grid-area: q33;
    background-color: #f3e608;
}
#qtable > q34 {
    grid-area: q34;
    background-color: #5aead5;
}
#qtable > q35 {
    grid-area: q35;
    background-color: black;
}
#qtable > q36 {
    grid-area: q36;
    background-color: white;
}
#qtable > q37 {
    grid-area: q37;
    background-color: #5aead5;
}
#qtable > q38 {
    grid-area: q38;
    background-color: black;
}
#qtable > q39 {
    grid-area: q39;
    background-color: #f3e608;
}
#qtable > q40 {
    grid-area: q40;
    background-color: white;
}
#qtable > q41 {
    grid-area: q41;
    background-color: white;
}
#qtable > q42 {
    grid-area: q42;
    background-color: #5aead5;
}
#qtable > q43 {
    grid-area: q43;
    background-color: white;
}
#qtable > q44 {
    grid-area: q44;
    background-color: #f3e608;
}
#qtable > q45 {
    grid-area: q45;
    background-color: black;
}
#qtable > q46 {
    grid-area: q46;
    background-color: white;
}
#qtable > q47 {
    grid-area: q47;
    background-color: #5aead5;
}
#qtable > q48 {
    grid-area: q48;
    background-color: white;
}
#qtable > q49 {
    grid-area: q49;
    background-color: #f3e608;
}
#qtable > q50 {
    grid-area: q50;
    background-color: #5aead5;
}
#qtable > q51 {
    grid-area: q51;
    background-color: black;
}
#qtable > q52 {
    grid-area: q52;
    background-color: black;
}
#qtable > q53 {
    grid-area: q53;
    background-color: #5aead5;
}
#qtable > q54 {
    grid-area: q54;
    background-color: #5aead5;
}
#qtable > q55 {
    grid-area: q55;
    background-color: white;
}
#qtable > q56 {
    grid-area: q56;
    background-color: #f3e608;
}
#qtable > q57 {
    grid-area: q57;
    background-color: black;
}
#qtable > q58 {
    grid-area: q58;
    background-color: #5aead5;
    pointer-events: all;
}
#qtable > q59 {
    grid-area: q59;
    background-color: #5aead5;
}
#qtable > q60 {
    grid-area: q60;
    background-color: white;
}
#qtable > q61 {
    grid-area: q61;
    background-color: black;
}
#qtable > q62 {
    grid-area: q62;
    background-color: white;
}
#qtable > q63 {
    grid-area: q63;
    background-color: white;
}
#qtable > q64 {
    grid-area: q64;
    background-color: #5aead5;
}
#qtable > q65 {
    grid-area: q65;
    background-color: black;
}
#qtable > q66 {
    grid-area: q66;
    background-color: #f3e608;
}
#qtable > q67 {
    grid-area: q67;
    background-color: #5aead5;
}
#qtable > q68 {
    grid-area: q68;
    background-color: white;
}
#qtable > q69 {
    grid-area: q69;
    background-color: #f3e608;
}
#qtable > q70 {
    grid-area: q70;
    background-color: #f3e608;
}
#qtable > q71 {
    grid-area: q71;
    background-color: white;
}
#qtable > q72 {
    grid-area: q72;
    background-color: black;
}
#qtable > q73 {
    grid-area: q73;
    background-color: #5aead5;
}
#qtable > q74 {
    grid-area: q74;
    background-color: white;
}
#qtable > q75 {
    grid-area: q75;
    background-color: #5aead5;
}
#qtable > q76 {
    grid-area: q76;
    background-color: black;
}
#qtable > q77 {
    grid-area: q77;
    background-color: #5aead5;
}
#qtable > q78 {
    grid-area: q78;
    background-color: black;
}
#qtable > q79 {
    grid-area: q79;
    background-color: #f3e608;
}
#qtable > q80 {
    grid-area: q80;
    background-color: white;
}
#qtable > q81 {
    grid-area: q81;
    background-color: black;
}
#qtable > q82 {
    grid-area: q82;
    background-color: white;
}
#qtable > q83 {
    grid-area: q83;
    background-color: white;
}
#qtable > q84 {
    grid-area: q84;
    background-color: #f3e608;
}
#qtable > q85 {
    grid-area: q85;
    background-color: black;
}
#qtable > q86 {
    grid-area: q86;
    background-color: #f3e608;
}
#qtable > q87 {
    grid-area: q87;
    background-color: #5aead5;
}
#qtable > q88 {
    grid-area: q88;
    background-color: white;
}
#qtable > q89 {
    grid-area: q89;
    background-color: #f3e608;
}
#qtable > q90 {
    grid-area: q90;
    background-color: #f3e608;
}
#qtable > q91 {
    grid-area: q91;
    background-color: white;
}
#qtable > q92 {
    grid-area: q92;
    background-color: black;
}
#qtable > q93 {
    grid-area: q93;
    background-color: #5aead5;
}
#qtable > q94 {
    grid-area: q94;
    background-color: white;
}
#qtable > q95 {
    grid-area: q95;
    background-color: #5aead5;
}
#qtable > q96 {
    grid-area: q96;
    background-color: black;
}
#qtable > q97 {
    grid-area: q97;
    background-color: #5aead5;
}
#qtable > q98 {
    grid-area: q98;
    background-color: black;
}
#qtable > q99 {
    grid-area: q99;
    background-color: #f3e608;
}
#qtable > q100 {
    grid-area: q100;
    background-color: black;
}
.selected {
    background-color: #c60842;
}
.content {
    position: absolute;
    top: calc(100dvh / 12);
    right: 0;
    bottom: 0;
    width: calc(100dvw - (800dvh / 12));
    pointer-events: none;
}
#question {
    position: absolute;
    top: 1dvh;
    right: 0;
    font-size: 7dvh;
    text-align: right;
    text-transform: uppercase;
    width: calc(99dvw - (900dvh / 12));
    height: 20dvh;
    cursor: default;
}
#answer {
    position: absolute;
    top: 34dvh;
    right: 0;
    width: calc(99dvw - (800dvh / 12));
    height: 30dvh;
    text-align: left;
    white-space: pre-line;
    font-size: 5dvh;
    text-transform: lowercase;
    cursor: default;
}
input[type="range"] {
    position: absolute;
    -webkit-appearance: none;
    background: none;
    display: flexbox;
    width: calc((100dvw - (900dvh / 12) + (100dvh / 12)) / 5.5);
    height: calc(100dvh / 24);
    transform: translatex(-2px) translatey(-1px);
    justify-content: left;
    vertical-align: middle;
    pointer-events: all;
}
input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: none;
    width: calc((100dvw - (900dvh / 12) + (100dvh / 12)) / 5.5);
    height: calc(100dvh / 24);
    border: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: transparent;
    width: 1dvh;
    height: calc(100dvh / 24);
    border-radius: 0;
    border: none;
}
input[type="range"]::-moz-range-thumb {
    background-color: transparent;
    width: 1dvh;
    height: calc(100dvh / 24);
    border-radius: 0;
    border: none;
}
input[type="range"]::-moz-range-track {
    background: none;
    width: calc((100dvw - (900dvh / 12) + (100dvh / 12)) / 5.5);
    height: calc(100dvh / 24);
    border: none;
}
#volbar {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-color: white;
    width: calc((100dvw - (900dvh / 12) + (100dvh / 12)) / 5.5);
    height: calc(100dvh / 24);
}