#site-nav {

    --nav-height: calc(var(--unitB) + var(--unitC));
    --nav-left-position: calc(calc(100% - min(100%, var(--max-wrapper-width))) / 2);

    position: relative;
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    top: 0;
    left: 0;
    margin-top: 0;
    width: min(auto, var(--max-wrapper-width));
    height: var(--nav-height);
    align-items: center;
    /* justify-content: space-between; */
    user-select: none;
    z-index: 1000000000;

}

#site-header.scroll-up #site-nav,
#site-header.scroll-down #site-nav {

    position: fixed;
    width: min(100%, var(--max-wrapper-width));
    margin: 0;

    left: calc(var(--nav-left-position) - 0);

    background-color: rgb(10, 11, 11);
    transition: top 200ms ease-in;

}

#site-header.scroll-up #site-nav {

    /* allowance for smooth entrance on scroll up */
    margin-top: calc(var(--nav-height) * -1);
    top: calc(var(--nav-height) * 1);
}

#site-header.scroll-down #site-nav {

    /* allowance for smooth exit on scroll down */
    margin-top: calc(var(--nav-height) * -1);
    top: calc(var(--nav-height) * 0);
}

#name-plate {
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    /* color: #cfd9dc; */

    font-family: "Red Hat Display", sans-serif;
    position: relative;
    font-size: 1rem;
    height: 100%;
    flex: 50% 1 1;
    padding: 1rem;

    & a:hover {

        color: #cefff8;
        transition: 200ms ease-in;
    }
}

#menu-buttons {

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    gap: 1rem;
    align-items: center;
    flex: 20% 1 1;
    height: 100%;

    padding: 1rem;
}

#menu-buttons button {

    margin: 1px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}

#menu_info-button {

    
}

#menu_work-button {


}


/* MODAL WINDOWS */


.modal-window {

    position: fixed;
    width: 100%;
    height: 100%;
}




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

    #site-nav {
        
        padding-right: 1.1rem;
    }

    #name-plate {

    }

    .homepage-main article {

        padding-right: 1rem;
    }

    .splash-messaging span {

        font-size: var(--unitC);
    }
}
@media screen and (max-width: 400px) {


}
@media screen and (max-width: 240px) {


}