/* spell-checker: disable */

.bubble {
	position: absolute;
	/* bottom: - 50px;		Valor original. Desde mitad de pantalla, hacia arriba. */
	bottom: 0px;			/* Se crean abajo. */
	width: 20px;
	height: 20px;
	background: radial-gradient( circle, #e2e5fd, #000d2b );
	border-radius: 50%;
	opacity: 0.7;							/* opacity: 0.7; */ 

	z-index: -1;			/* Asegura que las burbujas estén detrás de otros elementos */

	/* animation: float 6s linear infinite; */
	animation-name: float;
	animation-duration: 7s;					/* 6s */
	animation-timing-function: ease;		/* linear */
	animation-iteration-count: infinite;
}

@keyframes float {
	0% {
		transform: translateY(0) scale(1);
		opacity: 0.7;					/* 0.8 */
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateY(-100vh) scale(0.5);
		opacity: 0.3;
	}
}