@font-face {
	font-family: "Limited";
	src: url("../fonts/LimitedVF-Italic.woff2");
	font-style: normal;
	font-stretch: normal;
	font-weight: normal;
}

:root {
	--background: black;
	--foreground: white;
	
	--hour-position: 32;
	
	--minute-length: 26.25;
	--hour-length: 13.75;
	
	--minute-wght: 500;
	--hour-wght: 500;
}

@media (prefers-color-scheme: light) {
	:root {
		--background: white;
		--foreground: black;
	}
}

body {
	font-family: "Limited";
	font-variation-settings: "wght" 400;
	font-feature-settings: "ss19" on;
	font-size: 6.25dvmin;
	line-height: 1;
	
	background: var(--foreground);
	color: var(--foreground);
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 100dvh;
	align-content: center;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	height: 100dvh;
	overflow: hidden;
}

body::after {
	content: '(FILL)';
	grid-column-start: 1;
	grid-row-start: 1;
	justify-self: center;
	margin-block-start: .1em;
	margin-inline-start: -.074em;
	font-size: 72.1dvmin;
	color:  var(--background);
}

/* The hands */

div {
	grid-column-start: 1;
	grid-row-start: 1;
	z-index: 1;
	font-size: 3.125dvmin;
	width: calc( var(--minute-length) * 2dvmin );
	text-align: right;
	font-variation-settings: "wght" var(--minute-wght);
	justify-self: center;
	
	transform: rotate( calc( var(--progress) * 360deg - 90deg ) );
}
#hours {
	width: calc( var(--hour-length) * 2dvmin );
	font-variation-settings: "wght" var(--hour-wght);
}

/* The face */
ol {
	width: 100dvmin;
	grid-column-start: 1;
	grid-row-start: 1;
	margin: auto;
	padding: 0;
	border-radius: 50%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	place-items: center;
	list-style: none;
}

li {
	grid-column-start: 1;
	grid-row-start: 1;
	margin: 0;
	padding: 0;
	z-index: 1;
}
li:nth-of-type(2) {
	transform: rotate(90deg) translateY( calc( var(--hour-position) * -1.25dvmin)) rotate(-90deg);
}
li:nth-of-type(3) {
	transform: rotate(180deg) translateY( calc( var(--hour-position) * .8 * -1.25dvmin)) rotate(-180deg);
}
li:nth-of-type(4) {
	transform: rotate(270deg) translateY( calc( var(--hour-position) * -1.25dvmin)) rotate(-270deg);
}
li:nth-of-type(1) {
	transform: translateY( calc( var(--hour-position) * .8 * -1.25dvmin));
}
li:last-of-type {
	font-size: 4dvmin;
}