:root {
        --blue: #3399CC;
        --skyblue: #33D6FF;
        --midnightblue: #191970;
        --stucco: #C59276;
        --sunset1: #DE8237;
        --sunset2: #D08F4B;
        --sunset3: #BC9A70;
        --sunset4: #928383;
        --sunset5: #3E3F58;
        --sunrise2: #DACA94;
        --sunrise3: #85ADAE;
        --sunrise4: #1F93C1;
    }

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

    html {
        background: var(--blue);
    }

    body {
        background-color: var(--sunset5);
        width: 100%;
        min-height: 100vh;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .container {
        margin-left: auto;
        margin-right: auto;
        padding-top: 10vh;
        max-width: 60%;
        height: 100vh;
        padding-right: 1vmin;
        padding-left: 1vmin;
        /* position: relative; */
        background-image: url("../images/WaterBKG5.jpg");
        background-position: top left;
        background-repeat: repeat-y;
        background-size: contain;
    }

    body,
    p {
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
        color: var(--midnightblue);
        margin: 0;
        padding: 0;
        text-align: center;
    }

    h1 {
        font-family: 'Monotype Corsiva', cursive;
        background-color: transparent;
        color: var(--midnightblue);
        text-align: center;
        font-size: 8vmin;
        font-weight: bold;
        margin: 0 0 2.5vmin 0;
        text-shadow: 2px 2px 3px var(--sunrise2);
    }

    .p4 {
        font-size: 3.5vmin;
        margin: 2.5vmin 0;
        text-align: justify;
        margin: 0 1vw;
    }

    .p3 {
        font-size: 2.75vmin;
        font-style: italic;
        text-decoration: underline;
        margin-bottom: 2.5vmin;
    }

    .navbutton>ul {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(autofit, 1fr);
        justify-content: center;
        justify-items: center;
        gap: 3vh;
        margin: 1vh 2vw 2vh;
    }

    .navbutton>ul>li {
        background-color: transparent;
        outline: thick ridge wheat;
        border-style: ridge;
        border-color: var(--midnightblue);
        text-align: center;
        align-self: center;
        font-weight: bold;
        font-size: 3.75vmin;
        padding: 0.5vh 0.5vmax;
        min-width: 16vw;
    }

    .navbutton>ul>li>a {
        font-family: Monotype Corsiva, cursive;
        text-align: center;
        color: var(--midnightblue);
        font-weight: bold;
        text-decoration: none;
        font-size: 3.75vmin;
        padding: 0.5vh 0.5vmax;
    }

    .navbutton>ul>li:hover {
        background-color: var(--midnightblue);
        padding: 0.5vh 0.5vmax;
    }

    .navbutton>ul>li>a:hover {
        color: wheat;
        padding: 0.5vh 0.5vmax;
    }

    .navbutton>ul>li:last-child {
        grid-column: 1/span;
        margin-top: 5vh;
    }

    .footer {
        display: flex;
        justify-content: center;
    }

    .footer>p {
        font-size: 2vmin;
        font-weight: 200;
        padding: 0.5em;
        position: fixed;
        bottom: 1vh;
        border-style: ridge;
        border-color: var(--midnightblue);
    }