:root {
    --bg-color: #e9e6dd;
    --mid-tone-color: #484d77;
    --accent-color: #eb892d;

    --bg-text-color: black;
    --mid-tone-text-color: white;

    --sub-nav-hover-color: #2a2a2a;
    --sub-nav-active-color: #222;
}

body {
    background-color: var(--bg-color);
    color: var(--bg-text-color);
    box-sizing: border-box;
    border-collapse: collapse;
}

element {
    margin: 0;
    padding: 0;
}

/* #region Navigation */

#page-header {
    display: block;
    width: 1vw;
    height: 89px;
}

.navigation {
    position: fixed;
    display: block;
}

.main-nav {
    height: 54px;
    background-color: var(--bg-color);
    z-index: 1;
}

.main-nav-button {
    display: block;
    padding: 16px 16px;
    font-size: 22px;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
}
.main-nav-button:hover {
    background-color: var(--mid-tone-color);
    color: var(--mid-tone-text-color);
}
.main-nav-button.active {
    background-color: var(--accent-color);
}

.left {
    float: left;
}

.right {
    float: right;
}

/* #endregion */