@font-face {
	font-family: 'Chivo Mono';
	src: url('subset-ChivoMono-ExtraBold.woff2') format('woff2'),
	     url('subset-ChivoMono-ExtraBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Chivo Mono';
	src: url('subset-ChivoMono-ExtraBoldItalic.woff2') format('woff2'),
	     url('subset-ChivoMono-ExtraBoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

:root {
	--bg: black;
	--fg: white;
	--red: #f00;
	--red2: #800;
	box-sizing: border-box;

	--signfg: #777;
	--signbg: black;
	--signiris: #800;
}

@media (dynamic-range: high) {
	:root {
		--bg: color(display-p3 0 0 0);
		--fg: color(display-p3 1 1 1);
		--red: color(display-p3 1 0 0);
		--red2: color(display-p3 0.5 0 0);
	}
}

html, body, h1, h2, hr {
	margin: 0;
}

html {
	height: 100%;
	background-color: var(--bg);
	color: var(--fg);

	font-family: "Chivo Mono", monospace;
	text-transform: uppercase;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 0.95;
}

body {
	padding: min(2rem, 5vw);
}

article {
	max-width: 24rem;
}

footer {
	font-size: 0.75rem;
}

article > *:not(:first-child) {
	margin-top: 1rem;
}

h1::before, h2::before {
	content: "~";
	color: var(--red);
	margin-right: 0.5ch;
}

hr {
	border: 2.5px solid var(--red);
	box-shadow: -3px 3px 0px var(--red2);
}

a {
	color: var(--red);
	font-style: italic;
	text-decoration: none;
}

a:not(.linktree):hover {
	text-decoration: underline;
}

a.linktree {
	display: grid;
	margin: 0.25em 0;
	grid-template-areas: "a";
}

a.linktree span {
	padding: 0.5em;
	grid-area: a;

	background-color: var(--red);
	box-shadow: -3px 3px 0px var(--red2);
	color: var(--bg);

	transform: translate(0, 0);
	transition: all 0.1s ease-out;
}

a.linktree span::before {
	content: "\0000BB\0000A0";
}

a.linktree:hover span {
	color: var(--fg);
	background-color: var(--red2);
	transform: translate(-3px, 3px);
	box-shadow: 0px 0px 0px var(--red2);
}

a.linktree:active span {
	transform: translate(-4px, 4px);
}

a.wip:hover span {
	color: transparent;
}

a.wip:hover span::after {
	content: "(under construction)";
	color: var(--red);
	
	position: absolute;
	left: 1ch;
}

del {
	font-style: normal;

	background: linear-gradient(to bottom, transparent 15%, currentcolor 15% 85%, transparent 85%);
	text-shadow: none;

	text-decoration: line-through;
	text-decoration-thickness: 85%;
}

del.ns {
	user-select: none;
}

.sign {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	
	display: grid;
	overflow: hidden;
	grid-template-areas: "all";
	align-items: center;
	justify-items: center;

	z-index: -500;

	isolation: isolate;
}

@media (min-aspect-ratio: 3/2) {
	.sign {
		position: fixed;
		width: 80vmin;
		right: 1rem;
		top: 1rem;
	}
}

.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;
	}
}