*
    {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

:root
    {
        --bgColor: #1b1a1a;
        --bgQuestion: rgba(84, 82, 82, 0.7);
        --titleColor: rgb(0,117,64);
        --menuColor: rgba(10, 10, 10, 0.8);
        --fontColor: #f5f0f0;
        --borderRadius: 5px;
        --headerFont: "Cormorant Garamond";
        --bodyFont: "Crimson Text";
        font-size: 16px;
        --cardBG: rgb(239, 233, 233);
        --cardsection: lightgray;
        --out-shadow:  0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.5),
                       -0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 0.5);
        --in-shadow: inset 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.5),
                     inset -0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 0.5);
        --btn-hover-bg: #4a90e2;
        --btn-hover-text: #ffffff;
    }

.site-wrapper
    {
        height: 100vh;
        width: 100vw;
        overflow-x: hidden;
        background-color: var(--bgColor);
        color: var(--fontColor);
        display: grid;
        grid-template-rows: auto 1fr 4rem;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }


footer
    {
        grid-area: footer;
        position: sticky;
        bottom: 0;
        display: flex;
        justify-content: end;
        align-items: center;
        font-size: 0.9rem;
        font-style: italic;
        padding-right: 1rem;
        background-color: var(--bgColor);

    }