.dot-bubbles
{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    margin-top: 70px;
    width: 100%;
    justify-content: space-around;
    z-index: -1;
}
.dot-bubbles span
{
    position: relative;
    width: 30px;
    height: 30px;
    background: #4fc3dc;
    margin: 0 4px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #4fc3dc44,
    0 0 50px #4fc3dc,
    0 0 100px #4fc3dc;
    animation: animate 15s linear infinite;
    animation-duration: calc(245s / var(--i));

}
.dot-bubbles span:nth-child(even)
{
    background: #ff2d75;
    box-shadow: 0 0 0 10px #ff2d7544,
    0 0 50px #ff2d75,
    0 0 100px #ff2d75;
}
@keyframes animate
{
    0%
    {
        transform: translateY(100vh) scale(0);
    }
    100%
    {
        transform: translateY(-10vh) scale(1);
    }
}