.bubbles
{
    position: relative;
    width: 100%;
    height: 100vh;
    --bubble-color: rgba(166, 168, 173, 0.3);
    transform: rotate(180deg);
}

.bubble
{
    position: absolute;
    left: var(--bubble-left-offset);
    transform: translateY(120vh);
    display: block;
    width: var(--bubble-radius);
    height: var(--bubble-radius);
    border-radius: 50%;
    animation: float-up var(--bubble-float-duration) var(--bubble-float-delay) ease-in infinite;
}

.bubble::before
{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bubble-color);
    border-radius: inherit;
    animation: var(--bubble-sway-type) var(--bubble-sway-duration) var(--bubble-sway-delay) ease-in-out alternate infinite;
}

.bubble:nth-child(0)
{
    --bubble-color: rgba(255, 84, 32, 0.3);
    --bubble-left-offset: 39vw;
    --bubble-radius: 7vw;
    --bubble-float-duration: 12s;
    --bubble-sway-duration: 5s;
    --bubble-float-delay: 2s;
    --bubble-sway-delay: 0s;
    --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(1)
{
    --bubble-color: rgba(151, 255, 32, 0.3);
    --bubble-left-offset: 16vw;
    --bubble-radius: 5vw;
    --bubble-float-duration: 15s;
    --bubble-sway-duration: 5s;
    --bubble-float-delay: 3s;
    --bubble-sway-delay: 4s;
    --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(2)
{
    --bubble-color: rgba(255, 84, 32, 0.3);
    --bubble-left-offset: 33vw;
    --bubble-radius: 8vw;
    --bubble-float-duration: 14s;
    --bubble-sway-duration: 5s;
    --bubble-float-delay: 1s;
    --bubble-sway-delay: 4s;
    --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(3)
{
    --bubble-color: rgba(255, 32, 225, 0.3);
    --bubble-left-offset: 21vw;
    --bubble-radius: 1vw;
    --bubble-float-duration: 14s;
    --bubble-sway-duration: 5s;
    --bubble-float-delay: 0s;
    --bubble-sway-delay: 4s;
    --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(4)
{
    --bubble-color: rgba(255, 84, 32, 0.3);
    --bubble-left-offset: 34vw;
    --bubble-radius: 8vw;
    --bubble-float-duration: 13s;
    --bubble-sway-duration: 6s;
    --bubble-float-delay: 3s;
    --bubble-sway-delay: 2s;
    --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(5)
{
    --bubble-color: rgba(255, 84, 32, 0.3);
    --bubble-left-offset: 72vw;
    --bubble-radius: 8vw;
    --bubble-float-duration: 11s;
    --bubble-sway-duration: 4s;
    --bubble-float-delay: 2s;
    --bubble-sway-delay: 4s;
    --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(6)
{
    --bubble-color: rgba(32, 84, 255, 0.3);
    --bubble-left-offset: 63vw;
    --bubble-radius: 6vw;
    --bubble-float-duration: 11s;
    --bubble-sway-duration: 4s;
    --bubble-float-delay: 4s;
    --bubble-sway-delay: 1s;
    --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(7)
{
    --bubble-color: rgba(32, 84, 255, 0.3);
    --bubble-left-offset: 55vw;
    --bubble-radius: 1vw;
    --bubble-float-duration: 11s;
    --bubble-sway-duration: 5s;
    --bubble-float-delay: 4s;
    --bubble-sway-delay: 1s;
    --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(8)
{
    --bubble-color: rgba(74, 223, 250, 0.3);
    --bubble-left-offset: 55vw;
    --bubble-radius: 8vw;
    --bubble-float-duration: 14s;
    --bubble-sway-duration: 4s;
    --bubble-float-delay: 0s;
    --bubble-sway-delay: 4s;
    --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(9)
{
    --bubble-left-offset: 56vw;
    --bubble-radius: 4vw;
    --bubble-float-duration: 11s;
    --bubble-sway-duration: 5s;
    --bubble-float-delay: 3s;
    --bubble-sway-delay: 1s;
    --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(10)
{
    --bubble-color: rgba(212, 43, 57, 0.3);
    --bubble-left-offset: 75vw;
    --bubble-radius: 7vw;
    --bubble-float-duration: 14s;
    --bubble-sway-duration: 6s;
    --bubble-float-delay: 3s;
    --bubble-sway-delay: 1s;
    --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(11)
{
    --bubble-left-offset: 39vw;
    --bubble-radius: 5vw;
    --bubble-float-duration: 13s;
    --bubble-sway-duration: 4s;
    --bubble-float-delay: 2s;
    --bubble-sway-delay: 0s;
    --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(12)
{
    --bubble-color: rgba(32, 84, 255, 0.3);
    --bubble-left-offset: 29vw;
    --bubble-radius: 4vw;
    --bubble-float-duration: 14s;
    --bubble-sway-duration: 4s;
    --bubble-float-delay: 4s;
    --bubble-sway-delay: 3s;
    --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(13)
{
    --bubble-color: rgba(32, 84, 255, 0.3);
    --bubble-left-offset: 19vw;
    --bubble-radius: 4vw;
    --bubble-float-duration: 15s;
    --bubble-sway-duration: 6s;
    --bubble-float-delay: 3s;
    --bubble-sway-delay: 4s;
    --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(14)
{
    --bubble-left-offset: 30vw;
    --bubble-radius: 4vw;
    --bubble-float-duration: 11s;
    --bubble-sway-duration: 5s;
    --bubble-float-delay: 0s;
    --bubble-sway-delay: 1s;
    --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(15)
{
    --bubble-left-offset: 6vw;
    --bubble-radius: 9vw;
    --bubble-float-duration: 14s;
    --bubble-sway-duration: 4s;
    --bubble-float-delay: 4s;
    --bubble-sway-delay: 3s;
    --bubble-sway-type: sway-right-to-left;
}

@keyframes float-up
{
    to
    {
        transform: translateY(-120vh);
    }
}

@keyframes sway-left-to-right
{
    from
    {
        transform: translateX(-100%);
    }

    to
    {
        transform: translateX(100%);
    }
}

@keyframes sway-right-to-left
{
    from
    {
        transform: translateX(100%);
    }

    to
    {
        transform: translateX(-100%);
    }
}