:root {
	--size: 20;
	--width: 2.6;
	--arms: hsl(0, 0%, 19%);
	--background: hsl(307, 3%, 58%);
	--square: hsl(354, 77%, 41%);
	--shadow: hsl(180 30% 10% / .7);
}

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: url('bg.jpg');
	background: var(--background);
	background-size: 100vmin 100vmin;
	background-position: 50%;
	background-image: linear-gradient(0deg, var(--square) 26.5%, transparent 26.5%),
		linear-gradient(90deg, var(--square) 26.5%, transparent 26.5%),
		linear-gradient(180deg, var(--square) 26.5%, transparent 26.5%),
		linear-gradient(270deg, var(--square) 26.5%, transparent 26.5%);
	background-repeat: no-repeat;
}
body * {
	grid-column-start: 1;
	grid-row-start: 2;
	margin: 0;
}

time {
	--plus: 0;
	margin: auto;
	position: relative;
	--mindex: 0;
	transform: rotate(calc((360 / 12) * var(--index) * 1deg)) translateX(calc(23.5vmin + (var(--plus) * 1vmin))) rotate(calc((360 / 12) * var(--mindex) * -1deg));
	transform: rotate(calc((360 / 12) * var(--index) * 1deg)) translateX(calc(23.5svmin + (var(--plus) * 1svmin)) rotate(calc((360 / 12))) * var(--mindex) * 1deg));
}
time:nth-of-type(1) { --index: 1; --mindex: 1; --plus: 3.6; }
time:nth-of-type(2) { --index: 2; --mindex: -1; --plus: 3.6; }
time:nth-of-type(3) { --index: 3;  }
time:nth-of-type(4) { --index: 4; --mindex: 1; --plus: 3.6; }
time:nth-of-type(5) { --index: 5; --mindex: -1; --plus: 3.6; }
time:nth-of-type(6) { --index: 6; }
time:nth-of-type(7) { --index: 7; --mindex: 1; --plus: 3.6; }
time:nth-of-type(8) { --index: 8; --mindex: -1; --plus: 3.6; }
time:nth-of-type(9) { --index: 9; }
time:nth-of-type(10) { --index: 10; --mindex: 1; --plus: 3.6; }
time:nth-of-type(11) { --index: 11; --mindex: -1; --plus: 3.6; }
time:nth-of-type(12) { --index: 12;  }


/* 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;
}

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='transform:rotate(.00turn)']:nth-of-type(3) {
	transition: 0s;
}