html {
	/* Move clock to the right place */
	--width: 13.8;
	--←→: 1;
	--↑↓: -35.5;
	--scale: 1 0.6;
	--debug: 0;
	--color: oklch(from #f1f4f2 .99 c h);
}

body {
	display: grid;
	margin: 0;
	padding: 0;
	place-items: center;
	height: 100lvh;
	background: rgb(75 76 76);
}
article {
	display: grid;
	margin: auto;
	padding: 0;
	place-items: center;
	container-type: size;
	aspect-ratio: 3 / 4;
	max-height: 100vh;
	max-width: 100vw;
	width: 100%;
}
img {
	max-height: 100lvh;
	max-width: 100lvw;
}

article > div,
img,
div div {
	grid-column-start: 1;
	grid-row-start: 1;
}
article > div {
	border: calc( var(--debug) * 2px) solid red;
	width: calc( var(--width) * 1cqh);
	/* width: 32.667cqw; */
	aspect-ratio: 1;
	//translate: -1.9cqh -19.4cqh;
	translate: calc( var(--←→) * 1cqh ) calc( var(--↑↓) * 1cqh );
	display: grid;
	place-items: center;
	//rotate: 4deg;
	mix-blend-mode: soft-light;
	scale: var(--scale);
}

div div {
	width: 45%;
	height: 3%;
	background: rgb(214 204 194);
	background: var(--color);
	transform-origin: left center;
	filter: blur(.35cqh);
}
@media (max-aspect-ratio: 3 / 4) {
	/* article > div {
		translate: -2.6lvw -25.9lvw;
		width: 32.667lvw;
	} */
	div div {
		filter: blur(.2666lvw);
	}
}

#minutes,
#seconds {
	transform: translateX(50%) rotate(calc( var(--progress) * 360deg - 90deg ));
}
#seconds {
	height: 2%;
}
#hours {
	width: 27%;
	height: 4.242%;
	transform: translateX(50%) rotate(calc( var(--progress) * 360deg - 90deg ));
}

a {
	position: absolute;
	inset: 0;
}
a span {
	position: absolute;
	left: -1111em;
}