header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    font-family: "ProDisplayRegular", sans-serif;
    font-size: large;
    font-weight: 400;
    backdrop-filter: blur(5px);
    background-color: #FFFEE840;

    #header-container {
        max-width: 1200px;
        height: 65px;
        margin: 0 auto;

        nav {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .header-logo {
                height: 60px;
            }

            .header-nav {
                margin-inline: 10px;
                padding-inline: 10px;
                color: inherit;
                text-decoration: none;

                &.highlight {
                    padding: 10px 20px;
                    border-radius: 20px;
                    color: var(--primary-white);
                    background-color: var(--primary-black);
                }

                &.wide-only {
                    @media (max-width: 768px) {
                        display: none;
                    }
                }
            }
        }
    }
}