:root {
	--duration: 30;
	--m: 2.31;
	--r: .33;
	--path: path('M82.5 0c45.54 0 82.5 36.96 82.5 82.5S117.81 233.31 81.84 233.31C46.2 233.31 0 128.04 0 82.5S36.96 0 82.5 0Z');
}
@media (min-height: 33.5em ) and (min-width: 27.5em) {
	:root {
		--m: 3.5;
		--r: .5;
		--path: path('M125 0c69 0 125 56 125 125S178.5 353.5 124 353.5C70 353.5 0 194 0 125S56 0 125 0Z');
	}
}
@media (min-height: 50.25em ) and (min-width: 41.25em) {
	:root {
		--m: 5.25;
		--r: .75;
		--path: path('M187.5 0c103.5 0 187.5 84 187.5 187.5S267.75 530.25 186 530.25C105 530.25 0 291 0 187.5S84 0 187.5 0Z');
	}
}
@media (min-height: 67em ) and (min-width: 55em) {
	:root {
		--m: 7;
		--r: 1;
		--path: path('M250 0c138 0 250 112 250 250S357 707 248 707C140 707 0 388 0 250S112 0 250 0Z');
	}
}
body {
	margin: calc( (var(--m) + 1) * 1.4em);
	display: grid;
	overflow: hidden;
}
time {
	position: relative;
	margin: auto;
	width: calc(34 * var(--r) * 1em);
}
img {
	height: calc(34 * var(--r) * 1em + (var(--m)) * 2em);
	position: absolute;
	top: calc((var(--m)) * -1.2em);
	left: 50%;
	translate: -50%;
	transform: rotate(18deg);
	animation-name: turn;
	animation-duration: calc( var(--duration) / 12 * 10s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
div {
	text-align: center;
	width: 1em;
	aspect-ratio: 1;
	font-size: calc(var(--m) * 1em);
	background: black;
	color: white;
	offset-path: var(--path);
	animation-name: go;
	animation-duration: calc( var(--duration) * 1s);
	animation-delay: calc( var(--index) * (var(--duration) / 12) * -1s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	position: absolute;
	top: 0;
	left: 50%;
	translate: -222%;
	offset-anchor: bottom center;
}
div:nth-of-type(1) { --index: 1; }
div:nth-of-type(2) { --index: 2; }
div:nth-of-type(3) { --index: 3; }
div:nth-of-type(4) { --index: 4; }
div:nth-of-type(5) { --index: 5; }
div:nth-of-type(6) { --index: 6; }
div:nth-of-type(7) { --index: 7; }
div:nth-of-type(8) { --index: 8; }
div:nth-of-type(9) { --index: 9; }
div:nth-of-type(10) { --index: 10; }
div:nth-of-type(11) { --index: 11; }
div:nth-of-type(12) { --index: 12; }


@keyframes go {
  100% {
	offset-distance: 100%;
  }
} 
@keyframes turn {
	100% {
		rotate: 1turn;
	}
}