body {
	display: grid;
	margin: 0;
	padding: 0;
	place-items: center;
	height: 100dvh;
	background: rgb(75 76 76);
	perspective: 90vh;
}
img {
	max-height: 100dvh;
	max-width: 100dvw;
}

body > div,
img,
div div {
	grid-column-start: 1;
	grid-row-start: 1;
}
body > div {
	width: 38dvh;
	aspect-ratio: 1;
	translate: -3.8dvh -32.7dvh;
	display: grid;
	align-items: center;
	justify-items: center;
	transform: rotate3d(1, 0, 0, 0.11turn);
	mix-blend-mode: overlay;
	
	
}

div div {
	width: 42%;
	height: 2%;
	background: rgb(214 204 194);
	transform-origin: left center;
	filter: blur(.3lvh);
	border-radius: 1em;
	
}
@media (max-aspect-ratio: 2 / 3) {
	body > div {
		translate: -5.8dvw -48.9dvw;
		width: 57dvw;
	}
	div div {
		filter: blur(.3666dvw);
	}
}

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