#header_wrapper {
    --module: 8px;
    --palette-divider: rgba(0, 0, 0, 0.12);
    --palette-action-hover: rgba(0, 0, 0, 0.04);
    --palette-action-selected: rgba(0, 0, 0, 0.08);
    --typography-fontFamily: 'Public Sans Variable', 'Public Sans', sans-serif;
    --palette-text-secondary: #5d6a83;
    --palette-text-headings: #232d42;
    --transition-duration-standard: 0.15s;
    --transition-easing: ease-out;
    --breakpoint-values-sm: 600px;
    --zIndex-appBar: 1100;
}

#header_wrapper {
    margin-bottom: calc(var(--module) * 4);

    position: sticky;
    top: 0;
    z-index: var(--zIndex-appBar);
}

#header {
    padding: 0;
    margin: 0;

    border-bottom: 1px solid var(--palette-divider);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--module) * 2);

    overflow: clip;

    font-family: var(--typography-fontFamily);
    line-height: normal;
}

#header #header_logo_container {
    align-self: stretch;

    border-right: 1px solid var(--palette-divider);
}

#header #header_logo_container a {
    display: block;
    padding: calc(var(--module) * 2);

    transition: background-color var(--transition-duration-standard)
        var(--transition-easing);
}

#header #header_logo_container a:hover {
    background-color: var(--palette-action-hover);
}

#header #header_logo_container a:active {
    background-color: var(--palette-action-selected);
}

#header #header_logo_container a img {
    max-width: var(--logo-width, 100)px;
    max-height: 50px;
    object-fit: contain;
}

#header #header_h1_container {
    flex: 1;
}

#header #header_h1_container h1 {
    color: var(--palette-text-headings);
    font-weight: bold;
}

@media screen and (max-width: 600px) {
    #header #header_h1_container h1 {
        display: none;
    }
}

#header #header_login_container {
    margin: 0px;
    margin-right: calc(var(--module) * 2);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: calc(var(--module) * 1);
}

#header #header_login_container a {
    text-decoration: none;

    color: var(--palette-text-secondary);

    padding: calc(var(--module) * 1);
    border-radius: calc(var(--module) * 0.5);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--module) * 1);

    transition: background-color var(--transition-time) var(--transition-easing);
}

#header #header_login_container a:hover {
    background-color: var(--palette-action-hover);
}

#header #header_login_container a:active {
    background-color: var(--palette-action-selected);
}

@media screen and (max-width: 600px) {
    #header #header_login_container span {
        display: none;
    }
}