:root{color-scheme:light dark}:root{--green: hsl(115, 29%, 53%);--darkendGreen: hsl(115, 29%, 43%);--yellow: hsl(49, 51%, 57%);--darkendYellow: hsl(49, 51%, 47%);--lightGray: hsl(0, 0%, 85%);--gray: hsl(210, 2%, 53%);--darkGray: hsl(216, 2%, 59%);--white: hsl(0, 0%, 100%);--black: hsl(0, 0%, 13%);--orange: hsl(20, 90%, 59%);--blue: hsl(209, 91%, 75%);font-family:Roboto Slab,Arial,sans-serif;font-size:16px;--header-height: 50px;--keyboard-height: 200px;--game-max-width: 500px}:root{--color-tone-1: hsl(0, 0%, 0%);--color-tone-2: hsl(200, 2%, 48%);--color-tone-3: hsl(204, 2%, 54%);--color-tone-4: hsl(214, 9%, 84%);--color-tone-5: hsl(210, 12%, 94%);--color-tone-6: hsl(210, 12%, 97%);--color-tone-7: hsl(0, 0%, 100%);--color-nav-hover: hsl(0, 0%, 96%);--opacity-50: hsla(0, 0%, 100%, .5);--lightness-offset: 10}@media (prefers-color-scheme: dark){:root{--color-tone-1: hsl(0, 0%, 100%);--color-tone-2: hsl(200, 1%, 51%);--color-tone-3: hsl(210, 1%, 34%);--color-tone-4: hsl(240, 2%, 23%);--color-tone-5: hsl(240, 3%, 16%);--color-tone-6: hsl(240, 2%, 10%);--color-tone-7: hsl(240, 3%, 7%);--color-nav-hover: hsl(240, 2%, 19%);--opacity-50: hsla(0, 0%, 0%, .5)}}.night-mode{--color-tone-1: hsl(0, 0%, 100%);--color-tone-2: hsl(200, 1%, 51%);--color-tone-3: hsl(210, 1%, 34%);--color-tone-4: hsl(240, 2%, 23%);--color-tone-5: hsl(240, 3%, 16%);--color-tone-6: hsl(240, 2%, 10%);--color-tone-7: hsl(240, 3%, 7%);--color-nav-hover: hsl(240, 2%, 19%);--opacity-50: hsla(0, 0%, 0%, .5)}.light-mode{--color-tone-1: hsl(0, 0%, 0%);--color-tone-2: hsl(200, 2%, 48%);--color-tone-3: hsl(204, 2%, 54%);--color-tone-4: hsl(214, 9%, 84%);--color-tone-5: hsl(210, 12%, 94%);--color-tone-6: hsl(210, 12%, 97%);--color-tone-7: hsl(0, 0%, 100%);--color-nav-hover: hsl(0, 0%, 96%);--opacity-50: hsla(0, 0%, 100%, .5);--lightness-offset: 10}:root,.night-mode,.light-mode{--color-background: var(--color-tone-7)}:root{--color-present: var(--yellow);--color-correct: var(--green);--color-absent: var(--color-tone-2);--tile-text-color: var(--color-tone-7);--key-text-color: var(--color-tone-1);--key-evaluated-text-color: var(--color-tone-7);--key-bg: var(--color-tone-4);--key-bg-present: var(--color-present);--key-bg-correct: var(--color-correct);--key-bg-absent: var(--color-absent);--modal-content-bg: var(--color-tone-7)}@media (prefers-color-scheme: dark){:root{--color-present: var(--darkendYellow);--color-correct: var(--darkendGreen);--color-absent: var(--color-tone-4);--tile-text-color: var(--color-tone-1);--key-text-color: var(--color-tone-1);--key-evaluated-text-color: var(--color-tone-1);--key-bg: var(--color-tone-2);--key-bg-present: var(--color-present);--key-bg-correct: var(--color-correct);--key-bg-absent: var(--color-absent);--modal-content-bg: var(--color-tone-7)}}.night-mode{--color-present: var(--darkendYellow);--color-correct: var(--darkendGreen);--color-absent: var(--color-tone-4);--tile-text-color: var(--color-tone-1);--key-text-color: var(--color-tone-1);--key-evaluated-text-color: var(--color-tone-1);--key-bg: var(--color-tone-2);--key-bg-present: var(--color-present);--key-bg-correct: var(--color-correct);--key-bg-absent: var(--color-absent);--modal-content-bg: var(--color-tone-7)}.light-mode{--color-present: var(--yellow);--color-correct: var(--green);--color-absent: var(--color-tone-2);--tile-text-color: var(--color-tone-7);--key-text-color: var(--color-tone-1);--key-evaluated-text-color: var(--color-tone-7);--key-bg: var(--color-tone-4);--key-bg-present: var(--color-present);--key-bg-correct: var(--color-correct);--key-bg-absent: var(--color-absent);--modal-content-bg: var(--color-tone-7)}.colorblind{--color-correct: var(--orange);--color-present: var(--blue);--tile-text-color: var(--white);--key-bg-present: var(--color-present);--key-bg-correct: var(--color-correct);--key-bg-absent: var(--color-absent)}html{height:100%;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{height:100%;background-color:var(--color-background);margin:0;padding:0;overflow-y:hidden}.nav-item{background-color:var(--color-nav-hover)}html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}