body {
    background-color: #fff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bubble::before {
    content: ""; 
    position: absolute;
    top: 50px;
    left: 45px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    z-index: 10;
    filter: blur(2px);
}
.bubble::after {
    content: "";
    position: absolute;
    top: 80px;
    left: 80px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    z-index: 10;
    filter: blur(2px);
}
.bubble span {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(207, 242, 247, 0.092);
}

.bubble span:nth-child(2){
    inset: 10px;
    border-left: 15px solid #0fb3ff23;
    filter: blur(3px);

}
.bubble span:nth-child(3){
    inset: 10px;
    border-right: 15px solid #ff448624;
    filter: blur(8px);
}
.bubble span:nth-child(4){
    inset: 10px;
    border-top: 5px solid #ffeb3b2d;
    filter: blur(8px);
}
.bubble span:nth-child(5){
    inset: 30px;
    border-left: 15px solid #ff44866b;
    filter: blur(12px);
}
.bubble span:nth-child(6){
    inset: 10px;
    border-bottom: 10px solid #fff;
    /* filter: blur(3px); */
    transform: rotate(330deg);
}
.bubble {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25);
    animation: animate_4010 8s ease-in-out infinite;
}
@keyframes animate_4010 {
    0%, 100% {
        transform: translateY(-400px);
    }
    50% {
       transform: translateX(100px); 
    }
}