header {
    position: fixed;
    width: 100%;
    padding: 2rem;
    z-index: 20;
    transition: background-color, padding 0.4s ease;
    z-index: 9999;
    will-change: background;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 96%);
}

html.dark header{
    background: linear-gradient(180deg, rgba(0,0,0, 0.5) 0%, rgba(255, 255, 255, 0) 96%);
}

header.solid {
    background: #fff;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 769px) {
    header {
        background: #fff;
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    }
    html.dark header {
        background-color: #212529;
    }
}
/*
html.dark header.solid {
    background-color: #222;
} */

.header-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.header-menu .logo {
    animation-delay: 900ms;
    opacity: 0;
    display: flex;
    align-items: center;
    border: 0;
    max-width: 200px;
    filter: invert(0%) brightness(0%);
    transition: filter 0.3s ease;
}

html.dark .header-menu .logo {
    filter: invert(100%) brightness(110%);
    transition: filter 0.3s ease;
}
.loaded .header-menu .logo {
    animation: enterX 0.4s ease-in-out 900ms normal forwards;
}
@media screen and (min-width: 1020px) and (max-width: 1700px) {
    .header-menu .primary-menu {
        padding-right: 6.5rem;
    }
}