:root {
	--angle: calc(360 / 12);
	--border: 1.414;
	--size: 80;
}

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;
}
body * {
	grid-column-start: 1;
	grid-row-start: 2;
	margin: 0;
}
time, div {
	margin: auto;
}
time {
	font-size: 20vmin;
	font-size: 20svmin;
}



/* The analog clock */
time,
div {
	position: relative;
	width: calc( var(--size) * 1vmin );
	height: calc( var(--size) * 1vmin );
	width: calc( var(--size) * 1svmin );
	height: calc( var(--size) * 1svmin );
	border: calc(var(--border) * 1vmin) solid black;
	border: calc(var(--border) * 1svmin) solid black;
	border-radius: 50%;
}
div {
	display: block;
	z-index: -1;
	transform: rotate(calc(var(--angle) * .5deg));
}
body > div {
	
}
time::before {
	content: '';
	position: absolute;
	width: 2vmin;
	height: 2vmin;
	width: 2svmin;
	height: 2svmin;
	background: #0B3D91;
	border: calc(var(--border) * 1vmin) solid black;
	border: calc(var(--border) * 1svmin) solid black;
	left: calc(50% - var(--border) * 1vmin - 1vmin);
	left: calc(50% - var(--border) * 1svmin - 1svmin);
	top: calc(50% - var(--border) * 1vmin - 1vmin);
	top: calc(50% - var(--border) * 1svmin - 1svmin);
	z-index: 2;
	border-radius: 50%;
}
/* The arms of the clock */
time span {
	position: absolute;
	width: calc(var(--border) * 1vmin);
	width: calc(var(--border) * 1svmin);
	height: calc( (var(--size) - 20) * .5vmin );
	height: calc( (var(--size) - 20) * .5svmin );
	bottom: 50%;
	left: calc(50% - var(--border) * .5vmin);
	left: calc(50% - var(--border) * .5svmin);
	background: black;
	overflow: hidden;
	transform-origin: 50% 100%
}
time span:first-of-type {
	height: calc( (var(--size) - 20) * .5vmin * .6);
	height: calc( (var(--size) - 20) * .5vmin * .6);
}

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

/* The minutes on the face of the clock */
div div {
	display: block;
	width: calc(var(--border) * 1vmin);
	width: calc(var(--border) * 1svmin);
	border: 0;
	left: calc(50% - var(--border) * .5vmin);
	left: calc(50% - var(--border) * .5svmin);
	background: black;
	position: absolute;
	transform-origin: calc( var(--border) * .5vmin) calc( var(--size) * .5vmin);
	transform-origin: calc( var(--border) * .5svmin) calc( var(--size) * .5svmin);
	border-radius: 0;
	display: block;
	height: 4vmin;
	height: 4svmin;
	--index: 0;
	transform: rotate(calc(var(--angle) * var(--index) * 1deg)) translateY(2vmin); 
	transform: rotate(calc(var(--angle) * var(--index) * 1deg)) translateY(2svmin); 
}
div div:nth-of-type(1) { --index: 1; }
div div:nth-of-type(2) { --index: 2; }
div div:nth-of-type(3) { --index: 3; }
div div:nth-of-type(4) { --index: 4; }
div div:nth-of-type(5) { --index: 5; }
div div:nth-of-type(6) { --index: 6; }
div div:nth-of-type(7) { --index: 7; }
div div:nth-of-type(8) { --index: 8; }
div div:nth-of-type(9) { --index: 9; }
div div:nth-of-type(10) { --index: 10; }
div div:nth-of-type(11) { --index: 11; }