:root {
	--size: 42;
	--width: 2.6;
	--arms: hsl(0, 0%, 19%);
	--background: hsl(307, 3%, 58%);
	--square: hsl(354, 77%, 41%);
	--shadow: hsl(180 30% 10% / .7);
}
html {
	animation: colors 1674s infinite;
}
body {
	display: grid;
	grid-template-columns: 1fr;
	align-content: center;
	height: 100vh;
	height: 100svh;
	padding: 0;
	margin: 0;
	font-family: "Manu Formal 13", sans-serif;
	overflow: hidden;
	background: var(--background);
	transform: scale(.95);
}
body * {
	grid-column-start: 1;
	grid-row-start: 2;
	margin: 0;
}
body::after,
body::before {
	box-sizing: border-box;
	content: '';
	position: absolute;
	height: 100vmin;
	height: 100svmin;
	width: 100vmin;
	width: 100svmin;
	z-index: -1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 1vmin solid var(--arms);
	background: var(--arms);
}

div {
	background: var(--background);
	width: 70.7vmin;
	width: 70.7svmin;
	aspect-ratio: 1;
	margin: auto;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	align-content: center;
	z-index: 2;
}

time {
	--plus: 0;
	margin: auto;
	position: relative;
	transform: rotate(180deg);
}



time span {
	position: absolute;
	width: calc(var(--width) * 1vmin);
	width: calc(var(--width) * 1svmin);
	height: calc(var(--size) * 1vmin);
	height: calc(var(--size) * 1svmin);
	background: var(--arms);
	overflow: hidden;
	transform-origin: 50% 5%;
	left: calc(var(--width) *  -.5vmin);
	left: calc(var(--width) *  -.5svmin);
	top: calc(var(--size) * -.05 * 1svmin);
	box-sizing: border-box;
	transition: transform .95s linear;
	animation: 
		width 13337s linear infinite;
	z-index: 1;
}
body > time span {
	height: calc(var(--size) * 1.414vmin);
	height: calc(var(--size) * 1.414svmin);
	top: calc(var(--size) * -.05 * 1.414svmin);
	background: var(--background);
	z-index: 0;
}
time span:first-of-type {
	//clip-path: inset(50vmin 50vmin);
}

time::after {
	content: '';
	position: absolute;
	width: .2vmin;
	height: .2vmin;
	width: .2svmin;
	height: .2svmin;
	background: silver;
	left: calc(50% - .1vmin);
	left: calc(50% - .1svmin);
	top: calc(50% - .1vmin);
	top: calc(50% - .1svmin);
	//z-index: 2;
	border-radius: 50%;
}

time span[style*='rotate(0deg)'] {
	transition: none;
} 

@keyframes colors {
	100% {
		filter: hue-rotate(360deg);
	}
}