header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    padding: 3.125rem 11.5625rem;
}

header .logo {
    z-index: 100;
}

header svg {
    width: 70px;
    filter: drop-shadow(0rem .75rem 1.5rem rgba(255, 255, 255, 0.2));
    z-index: 100;
}

.mobile-nav > svg {
    width: 36px;
    height: 36px;
}

header nav .main-nav div:not(.dummy-logo) {
    width: 300px;
}

header a.special {
    padding: 0.15rem 1rem;
    text-align: center;
    
    border-radius: 0.25rem;
    border: 0.0625rem solid #a50000;
    background: rgba(255, 0, 0, 0.5);
    backdrop-filter: blur(0.1rem);
}

.dummy-logo {
    width: 70px;
    height: 50px;
}

@media (max-width: 767px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        padding: 20px 25px;
    }

    header nav .main-nav div:not(.dummy-logo) {
        width: 100%;
    }

    .main-nav.flex-col {
        position: absolute;
        top: calc(100% + 1rem);
        right: 0;
        border-radius: .35rem;
        box-sizing: border-box;

        background: #121212;
    }

    .main-nav.flex-col a {
        width: 100%;
    }

    .main-nav.flex-col a:not(.special) {
        padding: 0.5rem 1rem;
    }
}