:root {
	--color: black;
	--background: white;
	--rotate: 5;
	--borderW: .4em;
}

html {
	font-family: 'Open Sans', sans-serif;
	scroll-behavior: smooth;
}
body {
	height: 100dvh;
	display: grid;
	margin: 0;
	font-size: clamp(.7em, 4dvmin, 2em);
	overflow: hidden;
}

ul {
	box-sizing: border-box;
	grid-column-start: 1;
	grid-row-start: 1;
	display: grid;
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 1fr 1fr;
	margin: auto;
	list-style: none;
	padding: 0;
	gap: var(--borderW);
	background: var(--color);
	aspect-ratio: 1;
	width: 90dvmin;
	border: var(--borderW) solid black;
	border-radius: 50%;
	overflow: hidden;
	rotate: calc(var(--rotate) * -1deg);
}
li {
	background: var(--background);
	display: flex;
	flex-direction: column;
	justify-content: end;
	text-align: end;
	padding: 1em;
	overflow: hidden;
	background: hsl(calc(var(--z) * 90deg), 70%, 70%);
	background: oklch(.8 .25 calc(var(--z) * 90deg));
}
li:nth-of-type(2),
li:nth-of-type(3) {
	text-align: start;
}
li:nth-of-type(3),
li:nth-of-type(4) {
	justify-content: start;
}
li:nth-of-type(3) {
	order: 2;
}
li span {
	rotate: calc(var(--rotate) * 1deg);
	z-index: 2;
}


div {
	grid-column-start: 1;
	grid-row-start: 1;
	display: grid;
	aspect-ratio: 1;
	width: 90dvmin;
	margin: auto;
	animation-name: rotateDiv;
	animation-duration: 51s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.62,.4,.39,.61);
}
@media (prefers-reduced-motion) {
	div {
		animation-timing-function: steps(27);
	}
}
@keyframes rotateDiv {
	0% {
		transform: rotate(0deg) translateX(-35dvmin);
	}
	100% {
		transform: rotate(1080deg) translateX(-35dvmin);
	}
}

div::after {
	grid-column-start: 1;
	grid-row-start: 1;
	display: grid;
	width: 36dvmin;
	height: var(--borderW);
	background: yellow;
	margin: auto;
	content: '';
	transform: translateX(18dvmin);
	border-radius: 1em;
}

div ul {
	scale: .3;
	--rotate: -20;
	mix-blend-mode: darken;
	animation-name: rotateCompetenties;
	animation-duration: 2.3s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.5,.57,.57,.5);
}
@media (prefers-reduced-motion) {
	div ul {
		animation-timing-function: steps(5);
	}
}
@keyframes rotateCompetenties {
	
	100% {
		transform: rotate(-1080deg);
	}
}
div ul span {
	display: none;
}






@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(fonts/OpenSans-Bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/OpenSans-Regular.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/OpenSans-Italic.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}