:root {
    /* Colors */
    --blue: #0000a3;
    --green: #009900;
    --blueSoft: #6074e5;
    --greenSoft: #6cbd74;
    --blueNue: #051733;
    --white: #FFFFFF;
    --black: #000000;
    --grayDark: #555555;
    --gray: #AAAAAA; /* Do you hear something? */
    --grayLight: #CCCCCC;
    /* Numbers */
}

@font-face {
    font-family: 'DistrictFour';
    src: url('District Four.otf');
}

@font-face {
    font-family: 'CanvasBags';
    src: url('Canvas Bags df.otf');
}

@font-face {
    font-family: 'Smorgasbord';
    src: url('Smorgasbord.otf');
}

@font-face {
    font-family: 'CQMono';
    src: url('CQ Mono.otf');
}

* {
    box-sizing: border-box;
    margin: auto;
    color: var(--grayLight);
}

a {
    text-decoration: inherit;
    color: var(--grayLight);
}
a:active {
    color: var(--green);
}
a:hover {
    color: var(--greenSoft);
}

body {
    background-color: var(--grayDark);
    padding: 0;
    min-height: 100vh;
    font-family: DistrictFour, 'Times New Roman', Times, serif;
}

#wrapper {
    background-color: var(--blueNue);
    padding: 0rem;
    width: 100%;
    min-height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, [column_start], auto);
}

@media screen and (max-width: 575px) {
    .grid-container > * {
        grid-column: 1 / 6;
    }
}

header {
    background-color: var(--grayDark);
    padding-top: 1rem;
    min-width: 100%;
    height: fit-content;
}

.header-contents {
    width: fit-content;
}

.title-logo {
    height: 64px;
}

nav {
    background-color: var(--grayDark);
    min-width: 100%;
    height: fit-content;
    align-content: end;
}

.nav-contents {
    max-width: fit-content;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    float: left;
    font-size: 1.4rem;
    color: var(--green);
}

.page-contents {
    padding: 1rem;
    min-height: 79vh;
}

footer {
    background-color: var(--grayDark);
    padding: 1rem;
    min-width: 100%;
    height: fit-content;
}

h1 {
    font-family: CanvasBags, DistrictFour, 'Times New Roman', Times, serif;
    font-size: 2rem
}

img {
    font: 0.8rem CQMono, Consolas, mono;
}

@media screen and (min-width: 576px) {

    header {
        min-width: 100%;
        height: fit-content;
        grid-column: 1;
        padding: 1rem, 0, 1rem, 0;
    }

    .title-logo {
        height: 32px;
    }

    nav {
        width: fit-content;
        min-width: 100%;
        height: 100%;
        grid-column: 2 / 6;
    }

    nav ul li {
        font-size: 1.4rem;
    }

    .page-contents {
        min-height: 71vh;
        grid-column: 1/6;
    }

    footer {
        height: fit-content;
        grid-column: 1/6;
    }
}

@media screen and (min-width: 850px) {

}