header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;

    background-color: $header_bg_color;
    color: $header_text_color;
    padding: 0 30px;

    border-bottom: 4px solid $header_border_color;

    h1 {
        margin: 0;
        padding: 0 20px;
        color: $header_text_color;
        font-size: $font_size;
    }

    nav {
        display: flex;
        justify-content: left;
        margin: 0 20px;
        flex: 1 1 100px;
    }

    a {
        display: block;
        margin: 0;
        padding: 10px 20px;
        border-radius: 0;

        color: $header_text_color;
        font-size: $nav_font_size;
        text-decoration: none;

        &:hover {
            background-color: darken($header_bg_color, 10%);
            color: $page_link_hover_color;
        }
        &.current {
            background-color: $header_border_color;
        }
        &:focus {
            background-color: darken($header_bg_color, 10%);
            box-shadow: none;
            color: $page_link_hover_color;
        }
    }

    .username {
        font-size: 12pt;
    }
}