<style>
.container {
 color: whitesmoke;
 display: flex;
 min-height: 100vh;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.bubble {
 position: absolute;
 pointer-events: none;
 border-radius: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 -3px 5px #fff inset, 0 -10px 25px #ddf1e4 inset,
 0 2px 2px #fff inset, 2px 0 5px #fff inset, -2px 0 5px #fff inset,
 0 5px 25px #fff inset;
 animation: animate 5s linear forwards;
}

@keyframes animate {
 0% {
 transform: translate(-50%, -50%) scale(1);
 opacity: 1;
 filter: hue-rotate(0deg);
 }
 100% {
 transform: translate(-50%, -1000%) scale(0);
 opacity: 0;
 filter: hue-rotate(720deg);
 }
}

.bubble-container {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 215px;
 height: 215px;
 border-radius: 100%;
 box-shadow: 0 -3px 5px #fff inset, 0 -10px 25px #ddf1e4 inset,
 0 2px 2px #fff inset, 2px 0 5px #fff inset, -2px 0 5px #fff inset,
 0 5px 25px #fff inset;
 position: relative;
}
.bubble-container div {
 text-align: center;
}
.bubble-container::after {
 content: "";
 position: absolute;
 top: -25px;
 right: -10px;
 width: 70px;
 height: 70px;
 border-radius: 100%;
 box-shadow: 0 -3px 5px #fff inset, 0 -10px 25px #ddf1e4 inset,
 0 2px 2px #fff inset, 2px 0 5px #fff inset, -2px 0 5px #fff inset,
 0 5px 25px #fff inset;
 opacity: 0.5;
 z-index: -1;
 animation: float 6s ease-in-out infinite alternate;
}
.bubble-container::before {
 content: "";
 position: absolute;
 top: -18px;
 left: 40px;
 width: 20px;
 height: 20px;
 border-radius: 100%;
 box-shadow: 0 -3px 5px #fff inset, 0 -10px 25px #ddf1e4 inset,
 0 2px 2px #fff inset, 2px 0 5px #fff inset, -2px 0 5px #fff inset,
 0 5px 25px #fff inset;
 opacity: 0.4;
 z-index: -2;
 animation: float 3s ease-in-out infinite alternate;
}

@keyframes float {
 0% {
 transform: translatey(0px);
 }
 50% {
 transform: translatey(-10px);
 }
 100% {
 transform: translatey(0px);
 }
}
</style>