/* Centering stuff is not hard. */
body {
	margin: 0;
	background: silver;
	display: grid;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

/* The frame and the face of the clock */
div {
	--size: 80vmin;
	height: var(--size);
	width: var(--size);
	border: calc( var(--size) / 14 ) solid black;
	border-radius: 50%;
	box-sizing: border-box;
	background: whitesmoke;
}

.anim-clock-hour-hand {
	transform-origin: 50%;
	rotate: round( down,calc( var(--h) * 30deg + var(--m) * .5deg), 6deg );
	animation-name: fade;
	animation-duration: calc( (var(--d) + 600) * 1s );
	//animation-duration: 660s;
	animation-fill-mode: forwards;
	animation-delay: calc( var(--d) * 1s );
	animation-timing-function: cubic-bezier(0,1,.83,.67);
	
	transition: .3s;
	transition-timing-function: cubic-bezier(.17,.67,1,1.5);
	transition-timing-function: linear(0, 0.22 2%, 1.11 8%, 1.3, 1.35, 1.37, 1.37, 1.36 14%, 1.32 16%, 1.03 22%,
	0.94, 0.89, 0.87, 0.87, 0.88 31%, 1.01 38%, 1.04, 1.05, 1.04 46%, 1 53%, 0.98,
	0.99 61%, 1.01 72%, 1 87%, 1);
}
@keyframes fade {
	100% {
		opacity: 0;
	}
}