.bubbles {
    position: relative;
    display: flex;
    
}

.bubbles span {
    opacity: 50%;
    position: relative;
    width: 10px;
    height: 10px;
    background-color:#e2e2e2 ;
    margin: 0 4px;
    border-radius: 50%;
    box-shadow: 0 0 20px 10px #d4cb78,
    0 0 50px #d1d1d1,
    0 0 100px #dddddd ;
    animation: animate 30s linear infinite;
    animation-duration: calc(180s / var(--i));


}

.bubbles span:nth-child(even) {
    opacity: 70%;
    box-shadow: 0 0 10px 10px #d4cb78,
    0 0 50px #d1d1d1,
    0 0 50px #dddddd ;
   


}

@keyframes animate {

    0%
    {
        transform: translateY(-100vh) scale(0);
    }
    100%
    {
        transform: translateY(65vh) scale(0.5);
    }

}