@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');

body {
    background-color: rgb(20, 20, 20);
    margin: 0px;
}

#menu {
    height: 100vh;
    display: flex;
    align-items: center;
}

.menu-item {
    color: white;
    font-size: clamp(3rem, 8vw, 8rem);
    font-family: 'Rubik', sans-serif;

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

#menu-items {
    margin-left: clamp(4rem, 15vw, 48rem);
    position: relative;
    z-index: 2;
}

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

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

#menu-background-pattern {
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.1) 10%, 
        transparent 9%);
    background-position: 50% 0%;
    background-size: 12vmin 12vmin;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0px;
    left: 0px;
    transition: opacity 800ms ease, 
        background-size 800ms ease,
        background-position 800ms ease;
    z-index: 1;
}

#menu-background-image {
    background-image: url("https://drive.google.com/uc?id=146l6EfY-lzzM-fCWA4OXYBZX0IHjwYQU");background-position: center 40%;
    background-size: 110vmax;
    height: 100%;
    left: 0px;
    opacity: 0.15;
    position: absolute;
    top: 0px;
    transition: opacity 800ms ease,
        background-size 800ms ease,
        background-position 800ms ease;
    width: 100%;
    z-index: 0;
}
  
#menu-items:hover ~ #menu-background-pattern {
    background-size: 11vmin 11vmin;
    opacity: 0.5;
}

#menu > #menu-background-pattern {
    background-position: 60% calc(-25% * (var(--active-index, 0) + 1));
}

#menu > #menu-background-image {
    background-position: center calc(45% + 5% * var(--active-index, 0));
}