/* Code for The Bubble Animation */

.bubbles {
	display: flex;
	width: 100%;
	justify-content: space-around;
	position: absolute;
	bottom: 0;

	/* Default values for duration and y value (For Desktop) */
	--transform-duration: 6s;
	--transform-y: -300vh;
}

.bubbles img {
	opacity: 0;
	animation-name: bubble;
	animation-timing-function: linear;
	animation-duration: var(--transform-duration);
	animation-iteration-count: infinite;
	width: 100px;
}

@keyframes bubble {
	0% {
		transform: translateY(0);
		opacity: 0;
	}

	10% {
		opacity: 0.5;
	}

	100% {
		transform: translateY(var(--transform-y));
		opacity: 1;
	}
}

/* Delay for each bubble separately (Desktop View)*/
.bubbles img:nth-child(1) {
	animation-delay: 2s;
}

.bubbles img:nth-child(2) {
	animation-delay: 5s;
}

.bubbles img:nth-child(3) {
	animation-delay: 3s;
}

.bubbles img:nth-child(4) {
	animation-delay: 6s;
}

.bubbles img:nth-child(5) {
	animation-delay: 1s;
}

.bubbles img:nth-child(6) {
	animation-delay: 4s;
}

.bubbles img:nth-child(7) {
	animation-delay: 6s;
}

/* Delay for each bubble separately (Mobile View) */
@media screen and (max-width: 650px) {
	.bubbles img {
		width: 40px;
	}
	.bubbles img:nth-child(1) {
		animation-delay: 0s;
	}

	.bubbles img:nth-child(2) {
		animation-delay: 10s;
	}

	.bubbles img:nth-child(3) {
		animation-delay: 6s;
	}

	.bubbles img:nth-child(4) {
		animation-delay: 12s;
	}

	.bubbles img:nth-child(5) {
		animation-delay: 2s;
	}

	.bubbles img:nth-child(6) {
		animation-delay: 8s;
	}

	.bubbles img:nth-child(7) {
		animation-delay: 13s;
	}

}