:root {
	--background: radial-gradient(circle at center, hsl(240, 100%, 2%), hsl(240, 100%, 4%));
	--color1: hsl(59, 84%, 42%);
	--color2: hsl(9, 88%, 42%);
	--color3: hsl(208, 100%, 50%);
	--rotate-duration: 1.2s;
	--outer-radius: 26em;
	--inner-radius: 4em;
	--dot-radius: 5em;
	--dot-blur: 5em;
	--outline-width: 0.2em;
	--outline-color: #ffff;
	--unit: 1vmin;
	--zoom: 90;
	--available-screen-min: 665;
	--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
	font-size: calc(var(--px) * 10);
}

@-webkit-keyframes rotate {
	to {
		transform: translate(-50%, -50%) rotate(calc(360deg + var(--start) * 1deg)) translate(var(--inner-radius))
			rotate(calc(-360deg - var(--start) * 1deg));
	}
}

@keyframes rotate {
	to {
		transform: translate(-50%, -50%) rotate(calc(360deg + var(--start) * 1deg)) translate(var(--inner-radius))
			rotate(calc(-360deg - var(--start) * 1deg));
	}
}
body::before,
body::after,
html::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--dot-radius);
	height: var(--dot-radius);
	border-radius: 50%;
	border: var(--outline-width) solid #fff0;
	transform: translate(-50%, -50%) rotate(calc(var(--start) * 1deg)) translate(var(--inner-radius))
		rotate(calc(var(--start) * -1deg));
	outline: var(--outline-width) solid #0000;
	outline-offset: calc(var(--outer-radius) - (var(--dot-radius) * 0.5) - (var(--outline-width) * 0.5));
	transition: ease 200ms 400ms;
	transition-property: outline, border-color;
	-webkit-animation: rotate linear var(--rotate-duration) infinite;
	animation: rotate linear var(--rotate-duration) infinite;
	box-shadow:
		calc(var(--outer-radius) * 0.8090169944) calc(var(--outer-radius) * 0.5877852523) 0 0 var(--color, currentColor),
		calc(var(--outer-radius) * 0.3090169944) calc(var(--outer-radius) * 0.9510565163) 0 0 var(--color, currentColor),
		calc(var(--outer-radius) * -0.3090169944) calc(var(--outer-radius) * 0.9510565163) 0 0
			var(--color, currentColor),
		calc(var(--outer-radius) * -0.8090169944) calc(var(--outer-radius) * 0.5877852523) 0 0
			var(--color, currentColor),
		calc(var(--outer-radius) * -1) calc(var(--outer-radius) * 0) 0 0 var(--color, currentColor),
		calc(var(--outer-radius) * -0.8090169944) calc(var(--outer-radius) * -0.5877852523) 0 0
			var(--color, currentColor),
		calc(var(--outer-radius) * -0.3090169944) calc(var(--outer-radius) * -0.9510565163) 0 0
			var(--color, currentColor),
		calc(var(--outer-radius) * 0.3090169944) calc(var(--outer-radius) * -0.9510565163) 0 0
			var(--color, currentColor),
		calc(var(--outer-radius) * 0.8090169944) calc(var(--outer-radius) * -0.5877852523) 0 0
			var(--color, currentColor),
		calc(var(--outer-radius) * 1) calc(var(--outer-radius) * 0) 0 0 var(--color, currentColor),
		calc(var(--outer-radius) * 0.8090169944) calc(var(--outer-radius) * 0.5877852523) var(--dot-blur) 0
			var(--color, currentColor),
		calc(var(--outer-radius) * 0.3090169944) calc(var(--outer-radius) * 0.9510565163) var(--dot-blur) 0
			var(--color, currentColor),
		calc(var(--outer-radius) * -0.3090169944) calc(var(--outer-radius) * 0.9510565163) var(--dot-blur) 0
			var(--color, currentColor),
		calc(var(--outer-radius) * -0.8090169944) calc(var(--outer-radius) * 0.5877852523) var(--dot-blur) 0
			var(--color, currentColor),
		calc(var(--outer-radius) * -1) calc(var(--outer-radius) * 0) var(--dot-blur) 0 var(--color, currentColor),
		calc(var(--outer-radius) * -0.8090169944) calc(var(--outer-radius) * -0.5877852523) var(--dot-blur) 0
			var(--color, currentColor),
		calc(var(--outer-radius) * -0.3090169944) calc(var(--outer-radius) * -0.9510565163) var(--dot-blur) 0
			var(--color, currentColor),
		calc(var(--outer-radius) * 0.3090169944) calc(var(--outer-radius) * -0.9510565163) var(--dot-blur) 0
			var(--color, currentColor),
		calc(var(--outer-radius) * 0.8090169944) calc(var(--outer-radius) * -0.5877852523) var(--dot-blur) 0
			var(--color, currentColor),
		calc(var(--outer-radius) * 1) calc(var(--outer-radius) * 0) var(--dot-blur) 0 var(--color, currentColor);
}

body::before {
	color: var(--color1);
	--start: 0;
}

body::after {
	color: var(--color2);
	--start: 120;
}

html::after {
	color: var(--color3);
	--start: 240;
}

html:hover::after,
html:hover body::before,
html:hover body::after {
	transition-delay: 0ms;
	border-color: currentColor;
	outline: var(--outline-width) solid currentColor;
}
html:hover::before {
	transition-delay: 0ms;
	border-color: var(--outline-color);
}

html::before {
	--diameter: calc((var(--inner-radius) * 2) + var(--outline-width));
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--diameter);
	height: var(--diameter);
	border: var(--outline-width) solid #fff0;
	border-radius: 50%;
	transition: border-color ease 200ms 400ms;
}

html,
body {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-image: var(--background);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}