body {
	height: 100lvh;
	display: grid;
	background: #ebebeb;
}
svg {
	width: 80vmin;
	aspect-ratio: 1;
	margin: auto;
	border: 5vmin solid gold;
}
[id^="c-"] {
	animation-name: --kleur;
	animation-duration: 59s;
	animation-iteration-count: infinite;
	animation-timing-function: step-end;
}
#c-jack,
#c-haar {
	animation-direction: reverse;
}
#c-jack {
	animation-duration: 67s;
	animation-delay: -1113s;
}
#c-haar {
	animation-duration: 57s;
	animation-delay: -1031s;
}
#c-achter {
	animation-duration: 59s;
	animation-delay: -2241s;
}
#c-gezicht {
	animation-duration: 51s;
	animation-delay: -331s;
}
#c-kraag {
	animation-duration: 77s;
	animation-delay: -3345s;
}


@keyframes --kleur {
	12.5% {
		fill: #EED304;
	}
	25% {
		fill: #D32D30;
	}
	37.5% {
		fill: #56AFD2;
	}
	50% {
		fill: #DAC518;
	}
	62.5% {
		fill: #EB8EA7;
	}
	75% {
		fill: #7C3FC1;
	}
	87.5% {
		fill: #48DA99;
	}
	0%,100% {
		fill: #C13F3F;
	}
}