html {
	box-sizing: border-box;
	font-family: sans-serif;
	color-scheme: light dark;
}

html, body {
	margin: 0; padding: 0;
}

article {
	margin: 0.5em;
}

.less {
	opacity: 0.25;
}

@media(prefers-color-scheme: dark) {
	.less {
		opacity: 0.5;
	}
}

p {
	margin-top: 0.5em;
	margin-bottom: 0;
}

h2 {
	margin-top: 1em;
	margin-bottom: 0;
}

a {
	color: red;
}

a:hover {
	color: orange;
}

.click-to-copy {
	/* relevant if JS is off/navigator.clipboard not supported */
	user-select: all;
}

.sign {
	position: fixed;
	width: 40vmin;
	right: 1em;
	bottom: 1em;

	aspect-ratio: 1 / 1;
	height: auto;
	
	display: grid;
	overflow: hidden;
	grid-template-areas: "all";
	align-items: center;
	justify-items: center;

	z-index: -500;

	isolation: isolate;

	--signfg: color-mix(in srgb, CanvasText 25%, Canvas);
	--signbg: Canvas;
	--signiris: color-mix(in srgb, red 25%, Canvas);
}

@media (min-width: 40em) {
	.sign {
		--signfg: CanvasText;
		--signiris: red;
	}
}

.sign > * {
	grid-area: all;
}

.white {
	background-color: var(--signfg);
}

.black {
	background-color: var(--signbg);
}

.iris {
	background-color: var(--signiris);
	animation: iris 17s ease-in 4s infinite;
}

.circle {
	border-radius: 100%;
	width: var(--circlesize);
	height: var(--circlesize);
}

.cover {
	animation: spin;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	width: var(--coversize);
	height: calc(var(--coversize) / 5);
}

.circle.s1 {
	z-index: 1;
	--circlesize: 100%;
}

.circle.s2 {
	z-index: 2;
	--circlesize: 73%;
}

.cover.s3 {
	z-index: 3;
	--coversize: 104%;
	animation-duration: 80s;
	animation-delay: -30s;
}

.circle.s4 {
	z-index: 4;
	--circlesize: 47%;
}

.cover.s5 {
	z-index: 5;
	--coversize: 51%;
	animation-duration: 60s;
	animation-delay: -20s;
	animation-direction: reverse;
}

.circle.s6 {
	z-index: 6;
	--circlesize: 20%;
}

.circle.s7 {
	z-index: 7;
	--circlesize: 15%;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes iris {
	0% { transform: scaleY(100%); }
	0.5% { transform: scaleY(0%); }
	1% { transform: scaleY(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.sign * {
		animation-play-state: paused !important;
	}
}