header {
    border-radius: 1em;
    overflow: clip;
    margin: 0.5em;
    background-color: var(--header_background);
    color: var(--header_color);
    box-shadow: inset 0 0.3rem 1rem var(--shadow_color);

    .container {
        max-width: unset;
        margin: 0;
    }

    nav {
        display: flex;
        max-width: unset;
        justify-content: space-between;
        align-items: center;
        ul {
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: flex-end;
            margin: 0 0 0 0;
            padding: 0 0.5rem;

            list-style: none;
            flex-wrap: nowrap;
            li {
                align-content: center;
                font-size: clamp(1.2em,2.5vw,1.5em);
                a {
                    white-space: nowrap;
                    font-weight: bolder;
                    color: inherit;
                    padding: 0.2rem 0.6rem;
                    margin: 0.2rem;
                    text-decoration: none;
                    transition: background-color .2s ease-in-out;
                    border-radius: 0.2em;

                    &:hover,
                    &:focus-visible {
                        background-color: color-mix(in srgb, var(--header_background), oklch(0.4 0 0) 5%);
                    }
                }
            }
        }
    }
    a:has(img) {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    img {
        object-fit: cover;
        height: var(--logo_height);
        width: var(--logo_height);
        border-radius: 0.5em;
        margin: 0.7em;
        padding: 0;
    }
}


footer {
    background-color: var(--header_background);
    font-size: 0.8em;
    margin-top: auto;
    p {
        margin: 0;
        padding: 0;
    }
}





@media screen and (max-width: 600px) {
    header nav {
        flex-direction: column;
        ul {
            width: 100%;
            justify-content: space-evenly;
            flex-wrap: nowrap;
            align-content: center;
            justify-items: center;
            padding: 0 0.5rem 0.5rem;

            li a {
                margin: -0.8rem;
                font-size: clamp(0.8rem, 4vw, 1.5em);
            }
        }
    }
}