:root {
	
	/* This should change for every work of art sold */
	/* Totoula: 44 */
	--uniqueNumber: 0;
	
	/* This defines higher saturation in summer, lower in winter */
	/* we want to add a max of 8 to the algo, hence this: */
	--saturationAlgo: var(--uid) * 5/185;
	
	/* With the algo you get to a chrome between 8 and 14 */
	--chroma: calc( 8 + (var(--saturationAlgo)  * 1.2) ); /* between 8 and 14 */
	
	/* dark between 25 and 25 + 11 */
	--dark: calc(25 + var(--li));
	
	/* The dark hue rotates every three hours */
	--darkhue: calc(360 * var(--h) * 8 + var(--startHue) + var(--uniqueNumber));
	
	/* light between 52 and 52 + 33 */
	--light: calc(52 + (var(--li) * 3)) ;
	/* The light hue rotates every four hours */
	--lighthue: calc(360 * var(--h) * 6 + var(--startHue) + var(--uniqueNumber) - var(--uid));
	
	/* All the above, in oklch */
	--arms: oklch(calc( var(--dark) /100) calc( var(--chroma) /100) var(--darkhue));
	--background: oklch(calc( var(--light) /100) calc( var(--chroma) /100) var(--lighthue));
}
body {
	font-family: sans-serif;
	font-size: clamp(1em,3vw,1.414em);
	display: grid;
	grid-template-columns: 1fr 100svmin 1fr;
	grid-template-rows: 1fr 100svmin 1fr;
	height: 100vh;
	height: 100svh;
	padding: 0;
	margin: 0;
	background: var(--background);
	overflow: hidden;
	background-image: conic-gradient(from calc( var(--m) * 1turn), var(--background), var(--arms));
	cursor: none;
}

div {
	grid-column-start: 2;
	grid-row-start: 2;
	margin: auto;
	background: var(--background);
	background-image: conic-gradient(from calc( var(--h) * 1turn), var(--background), var(--arms));
	width: 70.7vmin;
	width: 70.7svmin;
	aspect-ratio: 1;
	z-index: 2;
}

button {
	font: inherit;
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	padding: 0 .3em;
	color: white;
	mix-blend-mode: difference;
	background: none;
	border: none;
}
button span {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
[popover] {
	max-width: 30em;
	padding: 1em;
	width: 70.7vmin;
	width: 70.7svmin;
	aspect-ratio: 1;
}
::backdrop {
	background: color-mix(in srgb, var(--background) 75%, transparent);
	filter: blur(3px);
}