@font-face {
    font-family: "logo-font";
    src: url("/static/fonts/BespokeSerif-Bold.woff2");
}

.top-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    column-gap: 0.5rem;
    row-gap: 0.5rem;

    padding: var(--topbar-padding);
    border-bottom: 1px solid var(--topbar-border-color);

    .logo {
        font-size: var(--base-font-size);
        line-height: var(--base-font-size);

        font-family: "logo-font", serif;
        a {
            text-decoration: none;
            color: var(--color-text);
        }
    }
    .subtitle {
        font-size: var(--subtitle-font-size);
        line-height: var(--base-font-size);
        color: var(--subtitle-text-color);
        text-transform: uppercase;
        margin-left: var(--title-subtitle-gap);
    }
    .spacer {
        flex-grow: 1;
    }
    .top-nav {
        > * {
            display: inline-block;
        }
    }
}