#SoapBubble {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 75px 0 120px;
}
#SoapBubble .bubble {
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	box-shadow: inset 0 0 25px rgb(255 255 255 / 25%);
	animation: soapbubble 8s ease-in-out infinite;
}
#SoapBubble .bubble:nth-child(2) {
	position: relative;
	zoom: 0.45;
	left: -10px;
	top: -100px;
	animation-delay: -4s;
}
#SoapBubble .bubble:nth-child(3) {
	position: relative;
	zoom: 0.25;
	right: -80px;
	top: -300px;
	animation-delay: -6s;
}
#SoapBubble .bubble:nth-child(4) {
	position: relative;
	zoom: 0.35;
	left: -120px;
	bottom: -200px;
	animation-delay: -3s;
}
#SoapBubble .bubble:nth-child(5) {
	position: relative;
	zoom: 0.5;
	left: 0;
	top: 200px;
	animation-delay: -5s;
}
@keyframes soapbubble {
	0%, 100% {
		transform: translateY(-20px);
	}
	50% {
		transform: translateY(20px);
	}
}
#SoapBubble .bubble::before {
	content: "";
	position: absolute;
	top: 50px;
	left: 45px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	z-index: 10;
	filter: blur(2px);
}
#SoapBubble .bubble::after {
	content: "";
	position: absolute;
	top: 80px;
	left: 80px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	z-index: 10;
	filter: blur(2px);
}
#SoapBubble .bubble span {
	position: absolute;
	border-radius: 50%;
}
#SoapBubble .bubble span:nth-child(1) {
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	/* inset: 10px; */
	border-left: 15px solid #0fb4ff;
	border-right: 15px solid #ff4484;
	filter: blur(8px);
}
#SoapBubble .bubble span:nth-child(2) {
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	/* inset: 10px; */
	border-right: 15px solid #ff4484;
	filter: blur(8px);
}
#SoapBubble .bubble span:nth-child(3) {
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	/* inset: 20px; */
	border-top: 15px solid #ffeb3b;
	filter: blur(8px);
}
#SoapBubble .bubble span:nth-child(4) {
	top: 30px;
	left: 30px;
	right: 30px;
	bottom: 30px;
	/* inset: 30px; */
	border-left: 15px solid #ff4484;
	filter: blur(12px);
}
#SoapBubble .bubble span:nth-child(5) {
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	/* inset: 10px; */
	border-bottom: 15px solid #fff;
	filter: blur(8px);
	transform: rotate(330deg);
}