: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 {
	margin: auto;
	position: relative;
	transform: translateX(23.5vmin) translateY(23.5vmin) rotate(180deg);
}
time:nth-of-type(2) {
	transform: translateX(-23.5vmin) translateY(23.5vmin) rotate(270deg);
}
time:nth-of-type(3) {
	transform: translateX(-23.5vmin) translateY(-23.5vmin) rotate(0deg);
}
time:nth-of-type(4) {
	transform: translateX(23.5vmin) translateY(-23.5vmin) rotate(90deg);
}

/* 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:nth-of-type(2) {
	box-shadow: .2em -.2em .2em var(--shadow);
}
time:nth-of-type(3) span {
	box-shadow: -.2em -.2em .2em var(--shadow);
}
time:nth-of-type(4) span {
	box-shadow: -.2em .2em .2em var(--shadow);
}

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