body {
	background: white;
	padding: 0;
	margin: 0;
	height: 100vh;
	display: flex;
	--d: 50vmin;
	--s: 0;
}

.block {
	flex-grow: 1;
	background: #fe470b;
	animation: blob 3s linear 0s both infinite;
	animation: blob 3s cubic-bezier(0.1, 0.7, 1, 0.1) 0s both infinite;
}

.block:nth-child(1) {
	transform: scale(-1, 1);
	background: #0092cd;
}

@media (orientation: portrait) {
	body {
		flex-direction: column;
	}
	.block:nth-child(1) {
		transform: scale(1, -1);
	}
}

@keyframes blob {
	20% {
		border-radius: var(--s) var(--d) var(--d) var(--s);
	}

	60% {
		border-radius: var(--s) var(--s) var(--d) var(--d);
	}

	80% {
		border-radius: var(--d) var(--s) var(--s) var(--d);
	}

	0%,
	100% {
		border-radius: var(--d) var(--d) var(--s) var(--s);
	}
}