@font-face {
  font-family: 'Mona Sans';
  src:
    url('Mona-Sans.woff2') format('woff2 supports variations'),
    url('Mona-Sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

@media (prefers-color-scheme: dark) {
	:root {
		--base: hsl(249deg, 22%, 12%);
		--surface: hsl(247deg, 23%, 15%);
		--overlay: hsl(248deg, 25%, 18%);
		--muted: hsl(249deg, 12%, 47%);
		--subtle: hsl(248deg, 15%, 61%);
		--text: hsl(245deg, 50%, 91%);
		--love: hsl(343deg, 76%, 68%);
		--gold: hsl(35deg, 88%, 72%);
		--rose: hsl(2deg, 55%, 83%);
		--pine: hsl(197deg, 49%, 38%);
		--foam: hsl(189deg, 43%, 73%);
		--iris: hsl(267deg, 57%, 78%);
		--highlight-low: hsl(244deg, 18%, 15%);
		--highlight-med: hsl(249deg, 15%, 28%);
		--highlight-high: hsl(248deg, 13%, 36%);
	}
}
@media (prefers-color-scheme: light) {
	:root {
		--base: hsl(32deg, 57%, 95%);
		--surface: hsl(35deg, 100%, 98%);
		--overlay: hsl(33deg, 43%, 91%);
		--muted: hsl(257deg, 9%, 61%);
		--subtle: hsl(248deg, 12%, 52%);
		--text: hsl(248deg, 19%, 40%);
		--love: hsl(343deg, 35%, 55%);
		--gold: hsl(35deg, 81%, 56%);
		--rose: hsl(3deg, 53%, 67%);
		--pine: hsl(197deg, 53%, 34%);
		--foam: hsl(189deg, 30%, 48%);
		--iris: hsl(268deg, 21%, 57%);
		--highlight-low: hsl(25deg, 35%, 93%);
		--highlight-med: hsl(10deg, 9%, 86%);
		--highlight-high: hsl(315deg, 4%, 80%);
	}
}
body {
	color: var(--text);
	font-family: 'Mona Sans', sans-serif;
	text-align: center;
	background-color: var(--base);
	font-size: 18px;
}
main {
	width: 500px;
	max-width: 90%;
	margin: auto;
}
div.collage {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
figure {
	flex: 0 1 500px;

	width: 500px;
	max-width: 90%;

	margin: auto;
}
figcaption {
	flex: 0 1 500px;

	width: 500px;
	max-width: 90%;
	max-height: 500px;

	overflow: scroll;
	scrollbar-color: var(--iris);

	text-align: left;
	padding: 0.5em;

	border-left: 0.5em solid var(--iris);
	border-radius: 0.5em 0 0 0.5em;

	margin: auto;
}
h1, h2 {
	font-stretch: 125%;
	color: var(--iris);
	text-shadow: var(--iris) 0 0 3em;
}
a {
	color: var(--iris);
	text-decoration: underline dashed;
}
div.flex {
	display: flex;
}
label {
	padding: 1px;
	margin: 0.5em;
	margin-right: 0;

	color:var(--base);
	background-color: var(--iris);

	flex-grow: 1;

	border: 1px solid var(--iris);
	border-radius: 0.5em 0 0 0.5em;
}

input,
select {
	font-size: 18px;
	margin: 0.5em;
	margin-left: 0;

	flex-grow: 2;

	border: 1px solid var(--iris);
	border-radius: 0 0.5em 0.5em 0;

	background: var(--base);
	color: var(--text);
	font-family: 'Mona Sans', sans-serif;
	text-align: center;
}
input[type="submit"] {
	border-radius: 0.5em;
	padding: 1em;
	filter: drop-shadow(0 0 8em var(--iris));
}
.block {
	display: inline-block;
}
@keyframes logo {
	0% {
		transform: translateY(0.5em);
	}
	100% {
		transform: translateY(0);
	}
}
img {
	width: 100%;
	border-radius: 0.5em;
	&.logo {
		image-rendering: pixelated;
		height: 10em;
		width: 10em;

		filter: drop-shadow(0 0 8em var(--iris));

		animation-name: logo;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate-reverse;
	}
}

footer {
	padding-top: 1em;
	color: var(--muted);
	a {
		color: var(--muted);
	}
}
pre {
	text-align: left;
	overflow-x: scroll;

	border: 1px solid var(--iris);
	border-radius: 0.5em;

	padding: 0.5em;
}
hr {
	border: none;
	border-top: 1px dashed var(--iris);
}