.bubble {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    opacity: 0.2;
    position: absolute;
    background: radial-gradient( circle at 75% 30%, white 1px, aqua 8%, darkblue 60%, aqua 100% );
    box-shadow: inset 0 0 2px #fff, inset 2px 0 5px #eaf5fc, inset 22px 0px 15px #c2d8fe, inset -5px -15px 20px #fde9ea, inset 0 12px 35px #fde9ea, 0 0 23px #fff;
}
.bubble:hover {
    opacity:0.4;
}

.bubble2 {
    bottom: 160px;
    right: 400px;
}

.bubble3 {
    bottom: 150px;
    right: 110px;
}

.bubble1 {
    bottom: 190px;
    left: 120px;
}

.bubble1-animation {
    animation: movebubble 15s linear, blink 1s 1s, blink 1s 2.5s, blink 1s 4s, blink 3s 5.5s, blink 3s 8.5s;
}
.bubble2-animation {
    animation: movebubble 20s linear, blink 3s 1s, blink 3s 5s, blink 3s 9s, blink 1s 12.5s, blink 1s 14s;
}
.bubble3-animation {
    animation: movebubble 17s linear, blink 3s 1s, blink 1s 4.5s, blink 1s 6s, blink 1s 7.5s, blink 1s 9s;
}

/* Short pulse for dot (3 dots) */
@keyframes blink {
    0%, 15% {
        opacity: 0.2;
    }

    20%, 80% {
        opacity: 0.9;
    }

    85%, 100% {
        opacity: 0.2;
    }
}

/* Vertical movement keyframe */
@keyframes movebubble {
    100% {
        bottom: 100vh; /* Move to the bottom of the screen */
    }
}