body {
    margin: 0;
    background-color: #313131;
    color: white;
    font-family: "IBM Plex Mono", monospace
}

#content {
    width: 100vw;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

#content main {
        max-width: var(--body-width);
        margin: 0 auto;
        padding: var(--body-padding);
    }

#content hr {
        margin: 3rem auto;
        width: 32rem;
        height: 0;
        border: 0;
        max-width: 50vw;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        border-top: 2px solid #fff8;
    }

#content table {
        font-size: var(--fs-normal);
    }

#content table.display {
            margin: 0 auto;
            font-size: var(--fs-display);
        }

#content table.display > tbody > tr td:first-child, #content table.display > tbody > tr th:first-child {
                    font-weight: 700;
                    text-transform: uppercase;
                    text-align: left;
                }

#content table.display > tbody > tr td:last-child {
                        padding-left: 2rem;
                        text-align: right;
                        text-transform: uppercase;
                    }

#content table {

        border-collapse: collapse
}

#content table > thead {
            background-color: #fff1;
            text-transform: uppercase;
            text-align: left;
        }

#content table > thead th {
                padding: 0.5rem;
            }

#content table > tbody > tr td, #content table > tbody > tr th {
                padding: 0.5rem;
            }

#content table > tbody > tr {
            background-color: #0003;
        }

#content table > tbody > tr:nth-child(odd){
                background-color: #0005;
            }

#content p.display {
        font-size: var(--fs-display);
        text-align: center;
    }

#content > div {
        margin: 4rem 2rem;
    }

#content a {
        color: gainsboro;
    }

#content .w100{
        width: 100%;
    }

#content .grid-2 {
        display: inline-grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

#content .grid-2 > .grid-item{
            grid-column: span 1;
            width: 100%;
        }

@media only screen
            and (max-width: 1024px){

#content .grid-2 > .grid-item{
                grid-column: span 2
        }
            }

#footer {
    width: 100vw;
    box-shadow: -2px 0 20px #0002;
    height: var(--footer-height);
    max-height: var(--footer-height);
    background-color: #444;
    display: flex;
}

#footer a {
        color: gainsboro;
    }

#footer p {
        font-size: var(--fs-normal);
        margin: auto 2rem;
    }

#footer p:first-child{
            margin-right: auto;
        }

@media only screen
    and (max-width: 1024px)
    {

#footer {
        flex-flow: column;
        justify-content: center
}

        #footer p {
            margin-top: 2px;
            margin-bottom: 2px;
        }
    }

#header, #backdrop {
    width: 100vw;
    height: var(--header-height);
}

#backdrop{
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#backdrop > div:first-child{
        position: sticky;
        top: 0;
        left: 0;
        z-index: 3;
        height: var(--header-height);
        background: linear-gradient(-45deg, #0f4d21db, #057d29);
    }

#backdrop > div:last-child{
        z-index: 2;
        position: absolute;
        height: calc(var(--header-height) + 32px);
        width: calc(100vw + 32px);
        top: -16px;
        left: -16px;
        background-color: #008026;
    }

#backdrop > div:last-child > span {
            overflow-wrap: break-word;
        }

#header{
    display: flex;
    box-shadow: 2px 0 20px #0008;
}

#header svg {
        width: var(--header-logo-size);
        height: var(--header-logo-size);
    }

#header > a {
        display: flex;
        text-transform: uppercase;
        margin: auto auto;
        z-index: 4;
        color: white;
        text-decoration: none;
    }

#header > a > div:last-child{
            margin-left: 2rem;
            margin-top: auto;
            margin-bottom: auto;
        }

#header > a > div:last-child > h1 {
                font-size: var(--header-h1-size);
                margin: 0;
            }

#header > a > div:last-child > span {
                font-size: var(--header-span-size);
                margin: 0;
            }

:root {
    /* Responsive vars */
    --header-height: 20rem;
    --header-logo-size: 16rem;
    --header-span-size: 24px;
    --header-h1-size: 48px;

    --body-width: 1024px;
    --body-padding: 3rem;
    --footer-height: 4rem;

    --fs-normal: 16px;
    --fs-display: 20px;
}

@media only screen
    and (max-width: 1024px)
    {

:root {
        --header-height: 16rem;
        --header-logo-size: 12rem;
        --header-span-size: 18px;
        --header-h1-size: 36px;

        --body-width: calc(100vw - 1rem);
        --body-padding: 1rem;

        --fs-normal: 14px;
        --fs-display: 16px
}
    }

@media only screen
    and (max-width: 640px)
    {

:root {
        --header-height: 10rem;
        --header-logo-size: 7rem;
        --header-span-size: 12px;
        --header-h1-size: 22px;

        --body-width: calc(100vw - 1rem);
        --body-padding: 0.5rem;

        --fs-normal: 12px;
        --fs-display: 14px
}
    }

@media only screen
    and (max-width: 520px)
    {

:root {
        --header-height: 8rem;
        --header-logo-size: 6rem;
        --header-span-size: 9px;
        --header-h1-size: 14px;

        --body-width: calc(100vw - 1rem);

        --fs-normal: 11px;
        --fs-display: 13px
}
    }