@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

:root {
    --duration-1: 20s;
    --duration-2: 30s;
    --duration-3: 40s;
    --duration-4: 50s;
    --duration-5: 60s;

    --color-1: rgba(246, 246, 246, 0.4);
    --color-2: rgba(232, 232, 232, 0.4);
    --color-3: rgba(28, 137, 108, 0.4);
    --color-4: rgba(54, 243, 120, 0.4);
}

.background-animated .bubble {
    width: 15vmin;
    height: 15vmin;
    border-radius: 15vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: var(--duration-1);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background-animated .bubble:nth-child(0) {
    color: var(--color-1);
    top: 51%;
    left: 21%;
    animation-duration: var(--duration-1);
    animation-delay: -165s;
    transform-origin: -9vw -21vh;
    box-shadow: -18vmin 0 2.991628513670349vmin currentColor;
}
.background-animated .bubble:nth-child(1) {
    color: var(--color-2);
    top: 79%;
    left: 91%;
    animation-duration: var(--duration-5);
    animation-delay: -238s;
    transform-origin: -24vw 11vh;
    box-shadow: -18vmin 0 2.9061131554991944vmin currentColor;
}
.background-animated .bubble:nth-child(2) {
    color: var(--color-2);
    top: 24%;
    left: 70%;
    animation-duration: var(--duration-4);
    animation-delay: -201s;
    transform-origin: 22vw -12vh;
    box-shadow: -18vmin 0 2.3483547770135793vmin currentColor;
}
.background-animated .bubble:nth-child(3) {
    color: var(--color-1);
    top: 99%;
    left: 28%;
    animation-duration: var(--duration-3);
    animation-delay: -107s;
    transform-origin: 13vw 8vh;
    box-shadow: 18vmin 0 3.11720785251652vmin currentColor;
}
.background-animated .bubble:nth-child(4) {
    color: var(--color-3);
    top: 20%;
    left: 1%;
    animation-duration: var(--duration-1);
    animation-delay: -18s;
    transform-origin: -15vw -12vh;
    box-shadow: 18vmin 0 2.3629703610313606vmin currentColor;
}
.background-animated .bubble:nth-child(5) {
    color: var(--color-1);
    top: 75%;
    left: 37%;
    animation-duration: var(--duration-1);
    animation-delay: -126s;
    transform-origin: -13vw 3vh;
    box-shadow: -18vmin 0 2.665964943774421vmin currentColor;
}
.background-animated .bubble:nth-child(6) {
    color: var(--color-3);
    top: 10%;
    left: 42%;
    animation-duration: var(--duration-3);
    animation-delay: -79s;
    transform-origin: -24vw -11vh;
    box-shadow: 18vmin 0 3.0429672637775997vmin currentColor;
}
.background-animated .bubble:nth-child(7) {
    color: var(--color-1);
    top: 22%;
    left: 18%;
    animation-duration: var(--duration-1);
    animation-delay: -34s;
    transform-origin: -22vw 1vh;
    box-shadow: 18vmin 0 2.363987039306379vmin currentColor;
}
.background-animated .bubble:nth-child(8) {
    color: var(--color-4);
    top: 66%;
    left: 88%;
    animation-duration: var(--duration-5);
    animation-delay: -137s;
    transform-origin: -5vw -6vh;
    box-shadow: 18vmin 0 2.9013828812059175vmin currentColor;
}
.background-animated .bubble:nth-child(9) {
    color: var(--color-2);
    top: 96%;
    left: 71%;
    animation-duration: var(--duration-5);
    animation-delay: -19s;
    transform-origin: 13vw -17vh;
    box-shadow: -18vmin 0 2.9697299216067212vmin currentColor;
}
.background-animated .bubble:nth-child(10) {
    color: var(--color-1);
    top: 77%;
    left: 99%;
    animation-duration: var(--duration-2);
    animation-delay: -43s;
    transform-origin: -22vw 10vh;
    box-shadow: 18vmin 0 2.5482019115545462vmin currentColor;
}
.background-animated .bubble:nth-child(11) {
    color: var(--color-3);
    top: 72%;
    left: 44%;
    animation-duration: var(--duration-4);
    animation-delay: -76s;
    transform-origin: 10vw -14vh;
    box-shadow: -18vmin 0 3.0628685168084804vmin currentColor;
}