:root {
	--size: 37.2105264;
	--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 {
	content: '';
	background: var(--square);
	position: absolute;
	height: 100vmin;
	height: 100svmin;
	width: 100vmin;
	width: 100svmin;
	z-index: -1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
body::after {
	background: var(--background);
	transform: translate(-50%, -50%) scale(.707);
}
body::before {
	animation: colors 3374s infinite;
}

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



/* The arms of the clock */
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;
	border: 1px solid hsl(0 0% 70% / .5);
	box-shadow: .2em .2em .2em var(--shadow);
	transition: transform .99s linear;
	animation: 
		width 13337s linear infinite,
		colors 2674s infinite;
}
time span:nth-of-type(2) {
	height: calc(var(--size) * 1.414vmin);
	height: calc(var(--size) * 1.414svmin);
	top: calc(var(--size) * -.05 * 1.414svmin);
}

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%;
}

/* We need this silly hack. Without it the seconds arm would make 
a 360 backwards turn every time it reaches 00 seconds.
*/
time span[style*='rotate(0deg)'] {
	transition: none;
} 

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