header {
    background-color: var(--headerColor);
    padding: 12px 36px;

    display: flex;
    flex-direction: row;
    align-content: space-around;
}

header > * {
    align-self: center;
}

.headerLogo {
    width: 3em;
}

.desktopNav {
    margin-left: auto;
    color: var(--gray);
    font-size: var(--navbarTextSize);
    display: var(--navbarDisplay);
    flex-direction: column;
    position: var(--navbarPosition);
    z-index: 1000;

    width: var(--navbarWidth);
    top: var(--navbarTop);
    right: var(--navbarRight);
    background-color: var(--headerColor);
}

.desktopNav > a {
    text-decoration: none;
    color: var(--gray);
    font-family: var(--main-font);
    transition: var(--navElementTransition);
    padding: var(--navbarPadding);
    text-transform: uppercase;
}

.navDivider {
    display: var(--navdividerDisplay);
}


/* Burger styles */
#burgerContainer {
    margin-left: auto;
    display: var(--burgerDisplay);
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: var(--white);
    margin: 6px 0;
    transition: 300ms ease-out;
}

.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}