#menu-background-white {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    height: 50vh;

    background-color: var(--color-nav-bg);

    z-index: -1;
}

#menu-card {
    float: left;
    padding-top: 15rem;
}

#menu {
    height: 30vh;
    margin-top: 20px;
}

#menu-rep-link {
    display: none;
    z-index: 3;
    position: relative;
}

.menu-item {
    color: var(--color-nav-link);
    font-size: clamp(2rem, 10vw, 3.5rem);
    font-family: "Montserrat", sans-serif;
    font-weight: 600;

    display: block;
    text-decoration: none;
    padding: clamp(0.25rem, 0.5vw, 1rem) 0;
    transition: opacity 400ms;
}

#menu-items {
    margin-left: clamp(0.8rem, 5vw, 20rem);
    position: relative;
    z-index: 2;
}

#menu-background-pattern {
    height: 100vh;
    width: 140vw;

    filter: blur(4px);
    -webkit-filter: blur(4px);


    background: linear-gradient(170deg, var(--color-nav-bgpattern1) 0%, var(--color-nav-bgpattern2) 22%, var(--color-nav-bgpattern3) 100%) 0, 0;

    position: absolute;
    left: -50px;
    top: -50px;
    z-index: 1;

    transition: transform 300ms linear;
}

#menu-background-image {
    height: 100%;
    width: 100%;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    background-position: center 40%;
    background-size: 110vmax;
    opacity: 0.1;
}

.sub-menu-item {
    color: var(--color-nav-sublink);
    font-size: clamp(1rem, 1vw, 2rem);
    font-family: "Montserrat", sans-serif;
    font-weight: 500;

    display: block;
    text-decoration: none;
    padding: clamp(0.2rem, 0.4vw, 0.8rem) 0;
}


.sub-menu-item:hover {
    color: var(--color-nav-sublink-hv);
    text-decoration: underline;
}

#menu-items:hover .menu-item {
    opacity: 0.3;
    text-decoration: none;
}

#menu-items:hover > .menu-item:hover {
    opacity: 1;
}

#menu[data-active-index = "0"] > #menu-background-pattern {
    transform: translateX(-40px) translateY(-40px);
}

#menu[data-active-index = "1"] > #menu-background-pattern {
    transform: translateX(-30px) translateY(-30px);
}


#menu[data-active-index = "2"] > #menu-background-pattern {
    transform: translateX(-20px) translateY(-20px);
}

#menu[data-active-index = "3"] > #menu-background-pattern {
    transform: translateX(-10px) translateY(-10px);
}

@media screen and (max-width: 990px) {
    #menu {
        height: 25vh;
        margin-top: -20px;
    }

    #menu-card {
        padding-top: 12rem;
    }

    #menu-items .menu-item {
        display: none;
    }

    #menu-items #sub-menu .sub-menu-item {
        display: none;
    }

    #menu-rep-link {
        display: block !important;
    }
}

@media screen and (max-width: 990px) {
    .responsive #menu-items .menu-item {
        display: block;
    }

    .responsive #menu-items #sub-menu .sub-menu-item {
        display: block;
    }
}