:root {
        /* --background-grad: linear-gradient(45deg, #1a2f3f, #7094ce);
        --background: rgb(0, 0, 0,0.6);
        --backmain: hsl(0, 0%, 10%); */

        /* --background-revers: hsl(20, 42%, 90%);    */
        --color-text: hsl(0, 0%, 95%);
        /* --btn-bg:  hsl(0, 0%, 33%);
        --btn: hsl(0, 0%, 19%); */

        --thing: hsl(0, 0%, 50%);

        --yellow: #c5b803;
        --green: rgb(0, 149, 7);

        --fnt-main: sans-serif;
        --fnt-fant: fantasy;

        --color: #1a2f3f;
        --color1: #595959;
        --color2: #308bc8;
        --color3: hsl(0, 0%, 40%);

        --delay: .5s;
        --delay1: .25s;
        --delay2: .5s;
        --delay3: .75s;
        --delay4: 1s;
        --delay5: 1.25s;
        --location: translate(11px, -6px);
        --barLength: 20px;
    }

    #gameContainer {
        margin-top: unset;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1rem .2rem;
        min-height: 90vh;
    }
    
    *::before, *::after {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    #nerdHub {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 800px;
        height: 100%;
    }
/*
    * {
        font-family:sans-serif;
        font-size: 1.1em;
         color: var(--color-text); 
    }

    :root {
        color: var(--color-text);
    } */

    /* body {
        width: 100%;
        height: 100%;
        background-color: var(--backmain);
        color: var(--color-text);
        align-items: center;
        align-content: center;
        max-width: 800px;
        margin: auto;
        max-height: 900px;
    } */

    #nerdTitle {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: relative;
        align-content: center;
        text-align: center;
        width: 100%;
        padding: 0;
        margin-top: .4rem;
    } 

    /* .hr {
        width: 100%;
        margin: 0 0 .4em 0;
    } */

    .mtitle {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .mtitle hr {
        width: 100%;
        margin: 0;
        height: 2px;
    }

    .buffer {
        display: none;
        visibility: hidden;
        height: 0px;
    }
    
    .unbuffer {
        display: inline;
        visibility: visible;
        height: 2rem;
    }

    /* .container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        margin: 0 .5em;
    } */

    /* p {
        font-size: .8em;
    }

    ul {
        font-size: .6em;
    }

    .small {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: .6em;
    }

    .padded {
        margin: 1em;
    } */

    .icons {
        width: 150px;
        height: 50px;
        position: absolute;
        right: 0px;
        bottom: 2px;
    }

    .icon {
        height: 45px;
        width: 45px;       
    }

    .toggle {
        width: 40px;
        border-radius: 20px;
        background-color: var(--btn-bg);
        cursor: pointer;
    }

    .toggle::after {
        position: absolute;
        content: "";
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--btn);
        border: 1px solid var(--btn-bg);
        transform: var(--location);
    }

    #theme {
        width: 40px;
        border-radius: 20px;
        background-color: var(--btn-bg);
        cursor: pointer;
        /* transform: var(--location); */
    }

    #theme::after {
        position: absolute;
        content: "";
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: var(--btn);
        border: 1px solid var(--btn-bg);
        transform: var(--location);
    }

    #settings {
        cursor: pointer;
    }

    #news {
        cursor: pointer;
    }

    #stats {
        cursor: pointer;
    }

    .pill {
        background-color: #009f40;
        border-radius: 25px;
        border: none;
        padding: .4em 1.2em;
        cursor: pointer;
    }

    .scroller {
        position: absolute;
        left: 50%;
        top: 30%;
        z-index: 99;
        translate: -50% 50%;
        animation: scrolling 4s 2s forwards;
        opacity: 0;
        background-color: #414141;
        border-radius: 5px;
        padding: .5em;
    }

    @keyframes scrolling {
        0%{translate: 100%; opacity: 0;}
        10%{translate: -40%; opacity: 1;}
        90%{translate: -60%; opacity: 1;}
        100%{translate: -250%; opacity: 0;}
    }

    #a {
        position: relative;
        background-color: var(--color3);
    }

    #b {
        position: relative;
        background-color: var(--color3);
    }

    #c {
        position: relative;
        background-color: var(--color3);
    }

    #d {
        position: relative;
        background-color: var(--color3);
    }

    #e {
        position: relative;
        background-color: var(--color3);
    }

    #f {
        position: relative;
        background-color: var(--color3);
    }

    #g {
        position: relative;
        background-color: var(--color3);
    }

    #h {
        position: relative;
        background-color: var(--color3);
    }

    #i {
        position: relative;
        background-color: var(--color3);
    }

    #j {
        position: relative;
        background-color: var(--color3);
    }

    #k {
        position: relative;
        background-color: var(--color3);
    }

    #l {
        position: relative;
        background-color: var(--color3);
    }

    #m {
        position: relative;
        background-color: var(--color3);
    }

    #n {
        position: relative;
        background-color: var(--color3);
    }

    #o {
        position: relative;
        background-color: var(--color3);
    }

    #p {
        position: relative;
        background-color: var(--color3);
    }

    #q {
        position: relative;
        background-color: var(--color3);
    }

    #r {
        position: relative;
        background-color: var(--color3);
    }

    #s {
        position: relative;
        background-color: var(--color3);
    }

    #t {
        position: relative;
        background-color: var(--color3);
    }

    #u {
        position: relative;
        background-color: var(--color3);
    }

    #v {
        position: relative;
        background-color: var(--color3);
    }

    #w {
        position: relative;
        background-color: var(--color3);
    }

    #x {
        position: relative;
        background-color: var(--color3);
    }

    #y {
        position: relative;
        background-color: var(--color3);
    }

    #z {
        position: relative;
        background-color: var(--color3);
    }

    .word {
        display: flex;
        position: relative;
        flex-direction: row;
        align-items: center;
        place-content: center;
        margin: 0;
        width: 95%;
    }

    #word1 {
        display: flex;
        position: relative;
    }

    #word2 {
        display: flex;
        position: relative;
    }

    #word3 {
        display: flex;
        position: relative;
    }

    #word4 {
        display: flex;
        position: relative;
    }

    #word5 {
        display: flex;
        position: relative;
    }

    #word6 {
        display: flex;
        position: relative;
    }

    #w1L0 {
        position: relative;
        background-color: var(--color);
        color: var(--color-text);
    }

    #w1L1 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay1);
        color: var(--color-text);
    }

    #w1L2 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay2);
        color: var(--color-text);
    }

    #w1L3 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay3);
        color: var(--color-text);
    }

    #w1L4 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay4);
        color: var(--color-text);
    }

    #w1L5 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay5);
        color: var(--color-text);
    }

    #w2L0 {
        position: relative;
        background-color: var(--color);
        color: var(--color-text);
    }

    #w2L1 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay1);
        color: var(--color-text);
    }

    #w2L2 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay2);
        color: var(--color-text);
    }

    #w2L3 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay3);
        color: var(--color-text);
    }

    #w2L4 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay4);
        color: var(--color-text);
    }

    #w2L5 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay5);
        color: var(--color-text);
    }

    #w3L0 {
        position: relative;
        background-color: var(--color);
        color: var(--color-text);
    }

    #w3L1 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay1);
        color: var(--color-text);
    }

    #w3L2 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay2);
        color: var(--color-text);
    }

    #w3L3 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay3);
        color: var(--color-text);
    }

    #w3L4 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay4);
        color: var(--color-text);
    }

    #w3L5 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay5);
        color: var(--color-text);
    }

    #w4L0 {
        position: relative;
        background-color: var(--color);
        color: var(--color-text);
    }

    #w4L1 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay1);
        color: var(--color-text);
    }

    #w4L2 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay2);
        color: var(--color-text);
    }

    #w4L3 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay3);
        color: var(--color-text);
    }

    #w4L4 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay4);
        color: var(--color-text);
    }

    #w4L5 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay5);
        color: var(--color-text);
    }

    #w5L0 {
        position: relative;
        background-color: var(--color);
        color: var(--color-text);
    }

    #w5L1 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay1);
        color: var(--color-text);
    }

    #w5L2 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay2);
        color: var(--color-text);
    }

    #w5L3 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay3);
        color: var(--color-text);
    }

    #w5L4 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay4);
        color: var(--color-text);
    }

    #w5L5 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay5);
        color: var(--color-text);
    }

    #w6L0 {
        position: relative;
        background-color: var(--color);
        color: var(--color-text);
    }

    #w6L1 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay1);
        color: var(--color-text);
    }

    #w6L2 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay2);
        color: var(--color-text);
    }

    #w6L3 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay3);
        color: var(--color-text);
    }

    #w6L4 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay4);
        color: var(--color-text);
    }

    #w6L5 {
        position: relative;
        background-color: var(--color);
        animation-delay: var(--delay5);
        color: var(--color-text);
    }

    /* #ver {
        position: absolute;
        right: 38%;
        top: 80%;
    } */

    #enter, #back {
        font-size: .8rem;
    }

    #hintBox {
        font-size: .8rem;
        height: 1ch;
    }

    .letter {
        display: flex;
        position: relative;
        font-weight: bolder;
        font-size: 2rem;
        align-items: center;
        place-content: center;
        width: 60px;
        height: 60px;
        margin: 5px 3px;
        background-color: #1a2f3f;
        border-radius: 3px;
        border: 1px solid rgb(63, 63, 63);
        cursor: default;
    }

    .true {
        background-color: #009f40;
    } 

    .inWord {
        background-color: #647e8c;
    }

    .keyboard {
        display: flex;
        position: relative;
        align-items: center;
        place-content: center;
    }

    .keys {
        display: flex;
        position: relative;
        align-items: center;
        place-content: center;
        font-weight: bolder;
        padding: 0;
        width: 50px;
        height: 60px;
        margin: .2rem .2rem;
        font-size: 1.5rem;
        /* color: var(--color-text); */
        background-color: var(--color3);
        border-radius: 3px;
    } 
    
    .keys:hover {
        cursor: pointer;
    }

    .enterkey {
        width: auto;
        padding: 0 1.2em;
    } 

    .backkey {
        width: auto;
        padding: 0 1.2em;
    } 

    .crow {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 90vh;
        align-content: center;
        align-items: center;
    }

    .list {
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 0 0 .4em 0;
        justify-content: center;
        align-items: center;
    }

    .shake {
        animation-name: shake;
        animation-duration: .4s;
    }


    @keyframes shake {
        0% {left: 0px;}
        10% {left: 5px;}
        20% {left: -5px;}
        40% {left: 5px;}
        60% {left: -5px;}
        80% {left: 5px;}
        90% {left: -5px;}
        100% {left: 0px;}
    }

    .flip {
        animation-name: flip;
        animation-duration: var(--delay);
        /* animation-direction: forwards; */
    }

    @keyframes flip {
        0% {
            transform:scaleY(100%);
        }
        50% {
            transform:scaleY(0%);
        }
        100% {
            transform:scaleY(100%);
        }
    }

    .modal {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(calc(19ch + -50%), -50%);
        /* background: var(--backmain); */
        color: var(--color-text);
        padding: 1em;
        max-width: 70ch;
        animation: fadein 1s;
        border: none;
        border-radius: 5px;
        backdrop-filter: blur(5px);
    }

    @keyframes fadein {
        from{opacity: 0;}
        to{opacity: 1;}
    }
    
    .modal::backdrop{
        background: rgba(0, 0, 0, 0.2);
    }

    /* .close-button {
        position: absolute;
        right: 5px;
        top: 5px;
        color: #000000;
        padding: .2em;
        cursor: pointer;
    }

    .close-button {
        opacity: 1;
    } */

    .columns {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: .8em;
        padding: .4em 0;
    }

    .deets {
        font-size: 1em;
        padding: .2em 0;
    }

    .teets {
        font-size: 0.6em;
        display: flex;
        flex-direction: row;
    }

    .teets div{
        padding: .2em .6em;
        margin: .2em .2em;
    }

    .teets:first-of-type {
        padding: .2em 0;
        margin: .2em 0;
        background-color: #c5b803;
    }

    .stats {
        width: 75px;
        font-size: 2em;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    #stat1 {
        text-align: right;
        width: var(--barLength);
        background-color: var(--color1);
    }
    #stat2 {
        text-align: right;
        width: var(--barLength);
        background-color: var(--color1);
    }
    #stat3 {
        text-align: right;
        width: var(--barLength);
        background-color: var(--color1);
    }
    #stat4 {
        text-align: right;
        width: var(--barLength);
        background-color: var(--color1);
    }
    #stat5 {
        text-align: right;
        width: var(--barLength);
        background-color: var(--color1);
    }
    #stat6 {
        text-align: right;
        width: var(--barLength);
        background-color: var(--color1);
    }

    .desc {
        padding: 0;
        margin: 0;
        display: flex;
        width: 75px;
        font-size: 1rem;
        text-align: center;
        align-items: center;
        place-content: center;
        place-items: center;
        align-content: center;
    }

    .bar {
        background-color: #1a2f3f;
        min-width: 20px;
    }

    .section {
        font-size: 1em;
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        place-items: center;
        align-items: center;
        margin: auto;
        width: 100%;
        padding: .4em;
    }

    .totals {
        display: flex;
        flex-direction: row; 
        align-content: center;
        place-content: center;
 
    }

    .gap {
        padding: .2em 0;
    }

    #distro {
        font-size: .8em;
    }

    #gameResult {
        font-size: 1em;
    }

    .button {
        padding: .2em .6em;
        border-radius: 25px;
        border: none;
        background-color: #009f40;
        color: white;
    }

    #keyboard {
        position: relative;
    }

    .menuIcon:hover {
        background-color: var(--color1);
    }

    @media screen and (max-width: 980px) {
        .keys {
            width: 30px;
            height: 50px;
            font-weight: bold;
            border-radius: 5px;
            padding: 1rem;
        }

        .letter {
            font-size: 2rem;
            width: 50px;
            height: 50px;
            margin: 3px 3px;
        }

        .enterkey {
        
            padding: 0 2em;
        } 
    
        .backkey {
        
            padding: unset;
        } 
        
        .mtitle {
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: .2rem 0;
        }

        .buffer {
            display: inline;
            visibility: visible;
            height: 2rem;
        }

        .unbuffer {
            display: none;
            visibility: hidden;
            height: 0rem;
        }
        
        /* #nerdTitle {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: relative;
            align-content: center;
            text-align: center;
            width: 100%;
            padding: 0 .5em;
            margin: .4em 0 0 0;
        }  */

        /* #news {
            position: absolute;
            left: 10px;
            height: 30px;
            top: 25px;
            cursor: pointer;
        } */

        /* .container {
            padding: 0;
            margin: 0;
        } */

        #gameContainer {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2rem .2rem 1rem .2rem;
            min-height: 90vh;
        }

        .modal {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* background: var(--backmain); */
            color: var(--color-text);
            padding: 1em;
            max-width: 85ch;
            animation: fadein 1s;
            border: none;
            border-radius: 5px;
            width: 92%;
            backdrop-filter: blur(5px);
        }

        .padded {
            margin: .5em;
        }

        /* #ver {
            position: absolute;
            right: 27%;
            top: 80%;
        } */

        .title h1 {
            font-size: .8em;
        }

        .title {
            margin: .2em;
        }

        .small {
            font-size: .4em;
            left: 54%;
        }

        .icon {
            height: 40px;
            width: 40px;
            margin: .1em;
        }

        .icons {
            margin: auto 0;
            width: 150px;
            display: inline-flex;
            position: absolute;
            right: 0px;
            bottom: 2px;
            place-content: center;
            padding: .2em;
        }

        /* .header {
            margin: 0;
            padding: 0;
        } */
    }