html {
	--border-width: 30;
}
body {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	margin: 0;
	background: black;
	height: 100vh;
	overflow: hidden;
}
section {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	margin: 0;
	height: 100vh;
	rotate: calc( var(--hour) * 0deg );
}

div {
	box-sizing: border-box;
	border-width: calc(sqrt(2) * var(--border-width) * 1dvmin) 0;
	border-color: hsl( calc( var(--index) * 30 ), calc( var(--day) * 100% + 30%), calc(40% + (var(--light) / .6) * 1%) );
	border-style: double;
	mix-blend-mode: soft-light;
	width: 99dvmin;
	height: 99dvmin;
	grid-column-start: 1;
	grid-row-start: 1;
	margin: auto;
	animation-name: grow;
	animation-duration: 43200s;
	animation-duration: 21600s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(var(--bezier));
	animation-timing-function: ease-out;
	animation-play-state: paused;
	animation-delay: calc( (var(--index) + var(--hour)) * -3600s);
	animation-direction: alternate;
	transform: rotate(360deg);
}
div:nth-of-type(odd) {
	//border-width: calc(sqrt(2) * var(--border-width) * 1dvmin) 0;
}

@keyframes grow {
	100% {
		scale: 0 1;
		translate: 0 calc(sqrt(2) * 10dvmin);
	}
}