body {
	display: grid;
	margin: 0;
	padding: 0;
	place-items: center;
	height: 100lvh;
	background: rgb(75 76 76);
}
img {
	max-height: 100lvh;
	max-width: 100lvw;
}

body > div,
img,
div div {
	grid-column-start: 1;
	grid-row-start: 1;
}
body > div {
	width: 14lvh;
	aspect-ratio: 1;
	translate: -2.4lvh -30.7lvh;
	display: grid;
	place-items: center;
	rotate: 4deg;
	mix-blend-mode: overlay;
}

div div {
	width: 40%;
	height: 2%;
	background: rgb(214 204 194);
	background: white;
	transform-origin: left center;
	filter: blur(.2lvh);
}
@media (max-aspect-ratio: 3 / 4) {
	body > div {
		translate: -3.2lvw -41lvw;
		width: 18.66666667lvw;
	}
	div div {
		filter: blur(.2666lvw);
	}
}

#minutes {
	transform: translateX(50%) rotate(calc( var(--progress) * 360deg - 90deg ));
}
#hours {
	width: 28.68%;
	height: 2.828%;
	transform: translateX(50%) rotate(calc( var(--progress) * 360deg - 90deg ));
}