:root {
	font-size: 20vmin;
	--duration: 1.4s;
	--color-1: #424a72;
	--color-2: #0f111a;
}

html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
	box-sizing: border-box;
}

html {
	filter: blur(0);
	--root-two: 1.4142135;
	--offset: calc(((1rem * var(--root-two)) - 1rem) * 0.5);
}

@supports (-moz-appearance: none) {
	html {
		padding: var(--offset);
	}
}

body {
	position: relative;
	color: var(--color-1);
	background-color: var(--color-1);
	-webkit-animation: flipflop steps(1) var(--duration) infinite;
	animation: flipflop steps(1) var(--duration) infinite;
}

@-webkit-keyframes flipflop {
	0%,
	50% {
		color: var(--color-1);
		background-color: var(--color-2);
	}
	50%,
	100% {
		color: var(--color-1);
		background-color: var(--color-1);
	}
}

@keyframes flipflop {
	0%,
	50% {
		color: var(--color-1);
		background-color: var(--color-2);
	}
	50%,
	100% {
		color: var(--color-1);
		background-color: var(--color-1);
	}
}

div {
	position: absolute;
	left: 0;
	top: 0;
	width: 1rem;
	height: 1rem;

	filter: drop-shadow(1rem -1rem 0 currentColor) drop-shadow(2rem 0rem 0 currentColor)
		drop-shadow(4rem 0rem 0 currentColor) drop-shadow(8rem 0rem 0 currentColor)
		drop-shadow(0rem 2rem 0 currentColor) drop-shadow(0rem 4rem 0 currentColor);
}

div::before {
	content: '';
	position: relative;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	transform: rotate(0deg);
	-webkit-animation: rotate linear var(--duration) infinite;
	animation: rotate linear var(--duration) infinite;
	display: block;
}

@-webkit-keyframes rotate {
	50%,
	100% {
		transform: rotate(90deg);
	}
}

@keyframes rotate {
	50%,
	100% {
		transform: rotate(90deg);
	}
}

div:nth-child(2) {
	color: var(--color-2);
	top: 1rem;
	-webkit-animation: index steps(1) var(--duration) infinite;
	animation: index steps(1) var(--duration) infinite;
}

@-webkit-keyframes index {
	0%,
	50% {
		z-index: -1;
	}
	50%,
	100% {
		z-index: 2;
	}
}

@keyframes index {
	0%,
	50% {
		z-index: -1;
	}
	50%,
	100% {
		z-index: 2;
	}
}

div:nth-child(2)::before {
	-webkit-animation-name: counter-rotate;
	animation-name: counter-rotate;
}

@-webkit-keyframes counter-rotate {
	0%,
	50% {
		transform: rotate(-90deg);
	}
}

@keyframes counter-rotate {
	0%,
	50% {
		transform: rotate(-90deg);
	}
}