/**
 * Blob front-end styling
 *
 * Defines front-end styling. All view.css files
 * like this one only load when enqueued manually
 * or via a block.json file. You can import this
 * file into an editor.css file to apply these
 * front-end styles within the block editor.
 */
.blob-wrap {
	position: relative;
}
/* override wp's !important and pass our background down to the children */
.blob-wrap.blob-wrap {
		background-color: transparent !important;
	}
.blob {
	pointer-events: none;
	position: absolute;
	top: calc(var(--y-blob) * 1%);
	left: calc(var(--x-blob) * 1%);
	width: 1em;
	height: 1em;
	z-index: -1;
}
.blob::before,
	.blob::after {
		content: "";
		position: absolute;
		width: min(70vw, 60em);
		height: min(60vw, 40em);
		transform-origin: 0% 0%;
		animation: rotate 30s linear infinite;
	}
.blob::after {
		background-image: radial-gradient(
			ellipse closest-side,
			var(--c-bg) 10%,
			transparent
		);
		border-radius: 50%;
	}
.blob::before {
		background-image: radial-gradient(
			ellipse closest-side,
			var(--c-bg),
			transparent 100%
		);
		filter: url(#noise);
	}
@media (max-width: 781px) {
.blob::before {
			opacity: 0.3
	}
		}
@keyframes rotate {
	0% {
		transform: rotate(0deg) translate(-50%, -50%);
	}
	50% {
		transform: rotate(180deg) scale(1.2) skew(-15deg) translate(-50%, -50%);
	}
	100% {
		transform: rotate(360deg) translate(-50%, -50%);
	}
}