styles.css

body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background-image: linear-gradient(
		rgba(17, 17, 17, 0), rgba(68, 68, 68, 0)
	);
}

:root {
	--color-primary: white;
	--color-second: #5cd1f7;
}

p {
	font-size: 10rem;
	font-family: "Concert One", sans-serif;
  font-weight: 400;
  font-style: normal;
	text-transform: uppercase;
	color: var(--color-primary);
	-webkit-text-stroke: 2px var(--color-second);
	text-stroke: 2px var(--color-second);
	text-shadow: 1px 1px 5px var(--color-second);
}

.bubble {
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-image: radial-gradient(at 50% 100%, var(--color-primary) 20%, var(--color-second));
    box-sizing: border-box;
    position: absolute;
    bottom: 10px;
    opacity: 0;
    animation: grow 3s ease-in-out infinite;
}
@keyframes grow {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    25% {
        opacity: 1;
        transform: scale(5);
    }
    50% {
        transform: scale(10);
    }
    100% {
        opacity: 0;
        transform: translateY(-200%) translateX(calc(100% * var(--direction))) scale(20);
    }
}