body {
	display: grid;
	grid-template-columns: 1fr;
	align-content: end;
	height: 100vh;
	height: 100svh;
	padding: 0;
	margin: 0;
	font-family: "Manu Formal 13", sans-serif;
	overflow: hidden;
}
.pirouette {
	grid-template-rows: 1fr;
}
body * {
	grid-column-start: 1;
	grid-row-start: 2;
	margin: 0;
}
.pirouette * {
	grid-row-start: 1;
}
body details {
	grid-row-start: 1;
	max-width: 30em;
	margin: 2vmin 4vmin 0;
	margin: 2svmin 4svmin 0;
}
time, div {
	margin: auto;
}
div {
	//display: none;
}
time {
	font-size: 20vmin;
	font-size: 20svmin;
}
#analog,
button {
	opacity: 0;
	position: absolute;
	margin-left: -99999em;
}
/* Checkbox hack */
label,
a {
	margin-left: 4vmin;
	margin-left: 4svmin;
	position: absolute;
	left: 50%;
	transform: translateX(-47vmin);
	transform: translateX(-47svmin);
	background: white;
	bottom: 1em;
	padding: .3em;
	z-index: 3;
	border-radius: .2em;
	font-size: 1em;
	font-size: clamp(.7em,3vmin,3em);
	font-size: clamp(.7em,3svmin,3em);
}
a {
	transform: translateX(29vmin);
	transform: translateX(29svmin);
	color: black;
	text-decoration: none;
}
#analog:checked ~ label:first-of-type {
	display: none;
}
label:last-of-type {
	display: none;
}
#analog:checked ~ label:last-of-type {
	display: block;
}



/* The analog clock */
time,
div {
	position: relative;
	width: 90vmin;
	height: 90vmin;
	width: 90svmin;
	height: 90svmin;
	border: 1vmin solid black;
	border: 1svmin solid black;
	border-radius: 50% 50% 0 0;
}
div {
	display: block;
	z-index: -1;
}
body > div {
	border-width: 5vmin;
	border-width: 5svmin;
	background: radial-gradient(white, white 45vmin, black 45vmin);
	background: radial-gradient(white, white 45svmin, black 45svmin);
}
time::before {
	content: '';
	position: absolute;
	width: 6vmin;
	height: 6vmin;
	width: 6svmin;
	height: 6svmin;
	background: green;
	border: 1vmin solid black;
	border: 1svmin solid black;
	left: calc(50% - 3vmin - 1vmin);
	left: calc(50% - 3svmin - 1svmin);
	top: calc(50% - 3vmin - 1vmin);
	top: calc(50% - 3svmin - 1svmin);
	z-index: 2;
	border-radius: 50%;
}
/* The arms of the clock */
time span {
	position: absolute;
	width: 1vmin;
	width: 1svmin;
	height: 35vmin;
	height: 35svmin;
	bottom: 50%;
	left: calc(50% - .5vmin);
	left: calc(50% - .5svmin);
	background: black;
	overflow: hidden;
	transform-origin: 50% 100%
}
time span:first-of-type {
	height: calc(35vmin * .6);
	height: calc(35svmin * .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: 1vmin;
	width: 1svmin;
	border: 0;
	left: calc(50% - .5vmin);
	left: calc(50% - .5svmin);
	background: black;
	position: absolute;
	transform-origin: .5vmin 45vmin;
	transform-origin: .5svmin 45svmin;
	border-radius: 0;
	display: block;
	height: 4vmin;
	height: 4svmin;
	transform:  translateY(2vmin);
	transform:  translateY(2vmin);
}
div div:nth-of-type(1) { transform: rotate(45deg) translateY(2vmin); transform: rotate(45deg) translateY(2svmin); }
div div:nth-of-type(2) { transform: rotate(90deg) translateY(2vmin); transform: rotate(90deg) translateY(2svmin); }
div div:nth-of-type(3) { transform: rotate(135deg) translateY(2vmin); transform: rotate(135deg) translateY(2svmin); }
div div:nth-of-type(4) { transform: rotate(180deg) translateY(2vmin); transform: rotate(180deg) translateY(2svmin); }
div div:nth-of-type(5) { transform: rotate(225deg) translateY(2vmin); transform: rotate(225deg) translateY(2svmin); }
div div:nth-of-type(6) { transform: rotate(270deg) translateY(2vmin); transform: rotate(270deg) translateY(2svmin); }
div div:nth-of-type(7) { transform: rotate(315deg) translateY(2vmin); transform: rotate(315deg) translateY(2svmin); }

div div::before {
	font-size: 3vmin;
	font-size: 3svmin;
	position: absolute;
	text-align: center;
	transition: .2s;
	opacity: 0;
}
input:not(:checked) ~ div div::before {
	opacity: 1;
}

div div:nth-of-type(1)::before { 
	content: '3';
	transform: translate(-.25em, 5vmin) rotate(-45deg);
	transform: translate(-.25em, 5svmin) rotate(-45deg);
}
div div:nth-of-type(2)::before { 
	content: '6';
	transform: translate(-.25em, 5vmin) rotate(calc(2 * -45deg));
	transform: translate(-.25em, 5svmin) rotate(calc(2 * -45deg));
}
div div:nth-of-type(3)::before { 
	content: '9';
	transform: translate(-.25em, 5vmin) rotate(calc(3 * -45deg));
	transform: translate(-.25em, 5svmin) rotate(calc(3 * -45deg));
}
div div:nth-of-type(4)::before { 
	content: '12';
	transform: translate(-.25em, 5vmin) rotate(calc(4 * -45deg));
	transform: translate(-.25em, 5svmin) rotate(calc(4 * -45deg));
}
div div:nth-of-type(5)::before { 
	content: '15';
	transform: translate(-.25em, 5vmin) rotate(calc(5 * -45deg));
	transform: translate(-.25em, 5svmin) rotate(calc(5 * -45deg));
}
div div:nth-of-type(6)::before { 
	content: '18';
	transform: translate(-.25em, 5vmin) rotate(calc(6 * -45deg));
	transform: translate(-.25em, 5svmin) rotate(calc(6 * -45deg));
}
div div:nth-of-type(7)::before { 
	content: '21';
	transform: translate(-.25em, 5vmin) rotate(calc(7 * -45deg));
	transform: translate(-.25em, 5svmin) rotate(calc(7 * -45deg));
}
div div:nth-of-type(8)::before { 
	content: '0';
	transform: translate(-.25em, 5vmin) rotate(calc(8 * -45deg));
	transform: translate(-.25em, 5svmin) rotate(calc(8 * -45deg));
}

/* The minutes on the face of the clock */
/* div div::after { 
	font-size: 2vmin;
	position: absolute;
	text-align: center
}
div div:nth-of-type(2)::after { 
	content: '45';
	transform: translate(-.4em, 2.5vmin) rotate(calc(2 * -45deg));
}
div div:nth-of-type(4)::after { 
	content: '90';
	transform: translate(-.4em, 2.5vmin) rotate(calc(4 * -45deg));
}
div div:nth-of-type(6)::after { 
	content: '135';
	transform: translate(-.4em, 2.5vmin) rotate(calc(6 * -45deg));
} */


[aria-live] {
	position: absolute;
	margin-left: -999999em;
}