:root {
    /* CSS HEX */
    --gunmetal: #223843ff;
    --manatee: #8d98a7ff;
    --almond: #dcccbbff;
    --sunray: #eab464ff;
    --dark-sienna: #2d0605ff;
}

body {
    margin: auto;
    display: grid;
    min-height: 100%;
    grid-template-rows: 1fr auto;
    max-width: 1024px;
    border: 4px solid var(--gunmetal);
}

.header_class {
    color: #FFFFFF;
    line-height: 19.8px;
    text-align: center;
    background-color: var(--gunmetal);
    padding: 2em;
}

.header_one /* "Devin Bidstrup" */ {
    font-size: 4vw;
    font-style: normal;
    font-variant: small-caps;
    font-weight: 700;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.header_two /* Logic Design Engineer */ {
    font-size: 1.75vw;
    font-variant: normal;
    font-weight: 700;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
}

.page_container  /*Contains content, nav, and footer*/  {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
}

/*.row*/  /*Contains content and nav */
/*{
}*/

.left_panel /* Nav column */ {
    width: 18%;
    margin: 1%;
    background-color: var(--manatee);
    border-radius: 5px;
    border: 2px solid var(--manatee);
    padding-top: 20px;
    padding-bottom: 20px;
}

    .left_panel.fixed {
        position: fixed;
        top: 0;
        /*width: 14.4%;
        margin: 0.8%;*/
    }

.scroll_swap /* Hidden object that replaces sidebar when you scroll down */{
    width: 0%;
    margin: 0%;
    height: 0%;
}

    .scroll_swap.fixed{
        padding: 2px;
        width: 18%;
        margin: 1%;
        padding-top: 20px;
    }

.right_panel /* Content column */ {
    width: 77%;
    margin: 1%;
    background-color: white;
}

/* Create two unequal columns that floats next to each other */
.column {
    float: left;
}

nav /*navigation bar*/ {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

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

        nav ul li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
            text-align:center;
        }
            /* Change the link color on hover */
            nav ul li a:hover, nav ul li a:active {
                background-color: var(--gunmetal);
                color: white;
            }

.footer {
    grid-row-start: 2;
    grid-row-end: 3;
    width: 100%;
    height: 2.5rem; /* Footer height */
    color: white;
    line-height: 19.8px;
    background-color: var(--gunmetal);
    clear: both;
    text-align: center;
}