/* relevant portion */
section {
	font-size: 0;
	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
	transition: filter ease 400ms;
}

section:hover {
	filter: drop-shadow(1.051vmin 1.051vmin 0.45vmin rgba(0, 0, 0, 0.11));
}

section:hover div {
	--animation-state: paused;
	background-color: hsl(0, 100%, 72%);
	transition-duration: 200ms;
}

div {
	position: relative;
	width: 27.7vmin;
	height: 27.7vmin;
	margin: -3.2vmin;
	display: inline-block;

	filter: hue-rotate(0);
	mask: radial-gradient(circle at 124% 50%, transparent 39%, white calc(39% + 1px));
	-webkit-mask: radial-gradient(circle at 124% 50%, transparent 39%, white calc(39% + 1px));
	background-color: hsl(0, 0%, 78%);
	border-radius: 50%;

	transition: background-color ease;
	transition-duration: 0;
	animation: hue ease var(--t) infinite;
	animation-play-state: var(--animation-state, running);

	box-shadow:
		inset 0 0 2vmin 1vmin rgba(255, 255, 255, 0.35),
		inset -0.5vmin -0.5vmin 2vmin 1vmin rgba(0, 0, 0, 0.2);
}

div:last-child {
	mask: none;
	-webkit-mask: none;
}

@keyframes hue {
	to {
		filter: hue-rotate(360deg);
	}
}

/* layout */
html,
body {
	position: relative;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

html {
	font-family: sans-serif;
	background-image: radial-gradient(circle at 50%, #fff, #fefefe);
	background-size: 100% 100%;
	background-attachment: fixed;
	display: block;
}

body {
	display: grid;
	place-items: center;
	background-color: transparent;
}

/* Made with Coffee, Care, and Curiosity by @ShadowShahriar */