body {
    height: 100vh;
    min-height: max-content;
    width: 100vw;

    /* overflow: hidden; */

    padding: 0;
    margin: 0;
}

#rainbowBackground {
    height: 100%;
    width: 100%;

    overflow: hidden;

    z-index: -1;
}

#rainbowBackground div {
    height: 100cqh;
    width: 100cqw;

    z-index: -1;

    position: absolute;
    left: 0;

    background: linear-gradient(to bottom, red calc(100%/7 * 0), red calc(100%/7 * 1), orange calc(100%/7 * 1), orange calc(100%/7 * 2), yellow calc(100%/7 * 2), yellow calc(100%/7 * 3), green calc(100%/7 * 3), green calc(100%/7 * 4), blue calc(100%/7 * 4), blue calc(100%/7 * 5), indigo calc(100%/7 * 5), indigo calc(100%/7 * 6), violet calc(100%/7 * 6), violet calc(100%/7 * 7));

    animation-duration: 7.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    top: calc(var(--rainbowBackgroundNOffset)*100cqh);
    animation-name: rainbowBackgroundScroll_anim;

    --rainbowBackgroundAnim_start: calc(calc(var(--rainbowBackgroundNOffset) * 100cqh) + 0cqh);
    --rainbowBackgroundAnim_end: calc(calc(var(--rainbowBackgroundNOffset) * 100cqh) + 100cqh);

}

#rainbowBackground-1 {
    --rainbowBackgroundNOffset: -1;
}

#rainbowBackground0 {
    --rainbowBackgroundNOffset: 0;
}



#rainbowBackground1 {
    --rainbowBackgroundNOffset: 1;
}

@keyframes rainbowBackgroundScroll_anim {
    0% {
        top: var(--rainbowBackgroundAnim_start);
    }

    100% {
        top: var(--rainbowBackgroundAnim_end);
    }
}

/* @keyframes rainbowBackground2Scroll_anim {
    0% {
        top: var(--rainbowBackgroundNOffset);
    }

    100% {
        top: 0vh;
    }
} */