:root {
		--main-font: "Instrument Serif";
		--background: url("img/sparkle.gif");
		--main-color: #ffffff;
		--theme: none;
}

@container style(--theme:none)
{
	ul {
		display: grid;
	}

	li 
	{
		grid-area: 1/1;
		animation: draai var(--dur) linear infinite;
	}
	
}

@container style(--theme:no-fancy)
{
	ul {
		display: block;
	}

	li {
		animation: none;
		grid-area: none;
	}
}

:modal {
  background-color: beige;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 5px;
}

h1, h2 {
		font-family: var(--main-font);
		color: var(--main-color);
		font-weight: 400;
		font-style: normal;
}

h1 {
	font-size: 4em;
}

h2 {
	font-size: 2em;
}

body
{
	margin: 0;
	height: 100dvh;
	display: grid;
	place-items: center;	
	background: var(--background);
	font-family: Arial, Helvetica, sans-serif;
}

:root:has([value="no-fancy"]:checked) {
	--theme: no-fancy;
	--background: black;
}

label {
	color: #ffffff;
}

ul {
	--dur: 100s;
	--size: min(50vw, 12em);
	animation: perspect;
	transform-style: preserve-3d;
}

li {
	display: grid;
	padding: 23px;
	animation-delay: calc( var(--dur) / sibling-count() * sibling-index() * -1 );
	transform-style: preserve-3d;
	clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); /* bron: https://css-shape.com/star/ */
	align-items: center;
	text-align: center;
	justify-items: center;
	border-radius: 50%;
	width: var(--size);
	aspect-ratio: 1/1;
	background-image: linear-gradient(45deg, yellow, gold);
	margin: 10px;
	backface-visibility: hidden;
}

li:hover {
	cursor: pointer;
}

@keyframes draai {
	0% {
		transform:
			rotateY(1turn)
			rotateX(0turn)
			translateZ( calc(var(--size) * 1.5));
	}
	100% {
		transform:
			rotateY(0turn)
			rotateX(1turn)
			translateZ( calc(var(--size) * 1.5));
	}
}

@keyframes perspect {
	0%
	{
		perspective: 50em;
	}
	100%
	{
		perspective: 10em;
	}
}