/* CSS Document */


svg {
	--bgcolor: #ffffff;
	--primarycolor: #000099;
	--accent1color: #dfac20;
	--accent2color: #c32e04;
	--start-hours: 0;
	--start-minutes: 0;
	--start-seconds: 0;
	height: 300px;
}

#clockface {
	fill: var(--bgcolor);
	stroke: var(--primarycolor);
	stroke-width: 2;
}

#indizes > use,
.hand {
	stroke: var(--primarycolor);
	stroke-width: 1;
	stroke-linecap: round;
}

#indizes > use:nth-child(3n+3) {
	stroke-width: 3;
}

#hours {
	stroke: var(--primarycolor);
	stroke-width: 4;
	transform: rotate(calc(var(--start-hours) * 30deg));
	animation: rotateHourHand calc(12 * 60 * 60s) linear infinite;
	animation-delay: calc(calc(var(--start-minutes) * -60 * 1s) + calc(var(--start-seconds) * -1 * 1s));
}

@keyframes rotateHourHand {
	from {
		transform: rotate(calc(var(--start-hours) * 30deg));
	}
	to {
		transform: rotate(calc(var(--start-hours) * 30deg + 360deg));
	}
}

#minutes {
	stroke-width: 2;
	transform: rotate(calc(var(--start-minutes) * 6deg));
	animation: rotateMinuteHand 3600s steps(60) infinite;
	animation-delay: calc(var(--start-seconds) * -1 * 1s);
}

@keyframes rotateMinuteHand {
	from {
		transform: rotate(calc(var(--start-minutes) * 6deg));
	}
	to {
		transform: rotate(calc(var(--start-minutes) * 6deg + 360deg));
	}
}

#seconds {
	stroke: var(--accent2color);
	transform: rotate(calc(var(--start-seconds) * 6deg));
	animation: rotateSecondsHand 60s steps(60) infinite;
}

@keyframes rotateSecondsHand {
	from {
		transform: rotate(calc(var(--start-seconds) * 6deg));
	}
	to {
		transform: rotate(calc(var(--start-seconds) * 6deg + 360deg));
	}
}