*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
   min-height: 100vh;
   background: #0c192c;
}
.container
{
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
}

.bubbles{
position: relative;
display: flex;
justify-content: space-between;

}

.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  #1e00ff,
     0 0 100px  #58037a;
     animation: animate 15s linear infinite;
     animation-duration: calc(120s / var(--i));
}
.bubbles span:nth-child(even)
 {
background-color: #3200fc;
box-shadow:  0 0 0 10px 0%  #8848c360,
0 0 50px #3aa3ff,
0 0 100 #321e40;
 }
@keyframes animate
{
 0%
 {
  transform: translateY(100vh) scale(0);
 }
 100%
 {
  transform: translateY(-10vh) scale(1);
 }


}