.navbar {
    width: 100%;
    background-color: var(--theme-surface-behind);
    display: flex;
    justify-content: flex-start;
}

.navbar > * {
    font-size: 16pt;
    text-align: center;
    margin: 0.5rem;
}

@media screen and (min-width: 701px) {
    .navbar {
        height: 2.7rem;
        padding-right: 2rem;
        flex-direction: row;
        align-items: center;
    }
}

@media screen and (max-width: 700px) {
    .navbar {
        flex-direction: column;
        align-items: flex-end;
    }

    /* .navbarHiddenItem is dynamically added to menu items when the menu is closed. */
    .navbarHiddenItem {
        display: none;
    }
}

/* .navbarActivePage is added to the menu item that links to the current page. */
.navbarActivePage {
    text-decoration: underline !important;
}

.navbarSiteTitleContainer {
    /* As an item on its parent flex */
    flex-grow: 1;
    align-self: stretch;
    margin: 0 0 0 0.5rem;
    /* As a flex itself */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.navbarSiteTitle {
    font-size: 24pt;
    text-align: left;
    flex-grow: 1;
}

@media screen and (max-width: 500px) {
    .navbarSiteTitle {
        font-size: 5vw;
    }
}

.navbarMenuToggle {
    background-color: var(--theme-surface-behind);
    height: 2.7rem;
}

.navbarMenuToggle img {
    padding: 0.15em;
    width: 5.2rem;
    height: 2.7rem;
}

@media screen and (min-width: 701px) {
    .navbarMenuToggle {
        display: none;
    }
}