.header1 {
    flex: initial;
    padding: 0em 1em 0em 0.3em;
}

.logo {
    font-family: var(--title-font);
    font-size: 1.2em;
    height: var(--navbar-height);
    line-height: var(--navbar-height);
    margin: 0em;
    padding: 0em;
    white-space: nowrap;
}

.logo > a:link {
    border-style: none;
}

.menu {
    background-color: var(--background-color);
    flex: auto;
    height: var(--navbar-height);
    line-height: var(--navbar-height);
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 0em 1em;
    text-align: right;
    white-space: nowrap;
}

.menu:active,
.menu:focus,
.menu:hover {
    overflow-x: auto;
}

.menu > ul {
    display: block;
    height: var(--navbar-height);
    margin: 0em;
    padding: 0em;
    list-style-type: none;
}

.menu > ul > li {
    display: inline-block;
    box-sizing: border-box;
    height: var(--navbar-height);
    padding: 0em;
}

.menu > ul > li:not(:last-of-type)::after {
    content: "|";
    padding: 0em 0.3em;
}

#preamble {
    display: flex;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 3000;

    background-color: var(--background-color);
    border-color: var(--border-color);
    border-style: none none solid none;
    border-width: thin;
    box-sizing: border-box;
    color: var(--text-color);
    height: var(--navbar-height);
    overflow: hidden;
}


@media print {
    .navbar-menu {
        display: none;
    }
}