@keyframes moveR {
	from, to { border-radius: 54% 79% 75% 58% / 70% 66% 71% 47%; transform: translate(0,0) rotate(-35deg) scale(0.875,1) }
	33% { border-radius: 79% 43% 56% 67% / 58% 64% 61% 60%; transform: translate(2.75em,0) rotate(0) scale(0.75,0.875) }
	67% { border-radius: 55% 77% 56% 67% / 58% 64% 61% 60%; transform: translate(1.25em,-0.5em) rotate(0) scale(1.125,0.875) }
}
@keyframes moveY {
	from, to { border-radius: 60% 59% 51% 58% / 69% 64% 52% 55%; transform: translate(2.25em,1em) rotate(45deg) scale(1.125,0.875); }
	33% { border-radius: 51% 95% 72% 59% / 75% 98% 54% 75%; transform: translate(0,0.5em) rotate(0) scale(1,1); }
67% { border-radius: 74% 85% 63% 87% / 81% 100% 62% 82%; transform: translate(1em,2em) rotate(0) scale(0.75,0.875); }
}
.blob {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0; 
	z-index: -1;
	width: 100%;
	height: 100%;
	filter: blur(3em) brightness(0.3);
	display: grid;
	place-items: center;
}
.blob * {
	animation: moveR 8s linear infinite;
	border-radius: 50%;
	mix-blend-mode: screen;
	position: absolute;
	width: 50%;
	height: 50%;
}
.blob .r { background: red }
.blob .g { animation-name: moveY; background: yellow }