body {
    background-color: hsl(200, 6%, 10%);
    color: black;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.mainDiv{
    margin-top: 23vh;
}

#menu[data-active-index="0"]>#menu-background-pattern {
    background-position: 0% -25%;
}

#menu[data-active-index="1"]>#menu-background-pattern {
    background-position: 0% -50%;
}

#menu[data-active-index="2"]>#menu-background-pattern {
    background-position: 0% -75%;
}

#menu[data-active-index="3"]>#menu-background-pattern {
    background-position: 0% -100%;
}

#menu[data-active-index="0"]>#menu-background-image {
    background-position: center 45%;
}

#menu[data-active-index="1"]>#menu-background-image {
    background-position: center 50%;
}

#menu[data-active-index="2"]>#menu-background-image {
    background-position: center 55%;
}

#menu[data-active-index="3"]>#menu-background-image {
    background-position: center 60%;
}

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