:root {
	--color__black--monokai: #231f23;
	--color__white--monokai: #fffbf9;
	--color__green--monokai: #a8dd76;
	--color__red--monokai: #ff6188;

	--color__bg: var(--color__white--monokai);
	--color__fg: var(--color__black--monokai);
	--color__link: var(--color__red--monokai);
	--color__bg--highlight: var(--color__green--monokai);
	--color__fg--highlight: var(--color__black--monokai);
}

* {
	margin:  0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-family: "Open Sans", sans-serif;
	font-size: 0.666rem;
}

body {
	display: grid;
	min-height: 100dvh;
	padding: 4.25em 2.62em;
	place-items: center;
	font-size: 1.5em;
	background-color: var(--color__bg);
	color: var(--color__fg);
}
	.container {
		max-width: 60ch;
	}
		.wave {
			display: inline-block;
			transform-origin: 90% 100%;
			animation: wave .15s linear infinite alternate;
		}
		p {
			line-height: 1.75;
		}
		p:first-child {
			font-size: 1.618em;
		}
		:is(p, header) + p {
			margin-top: 1em;
		}
		p::selection {
			color: var(--color__fg--highlight);
			background-color: var(--color__bg--highlight);
		}

			a:link,
			a:visited {
				color: var(--color__link);
			}

		cite {
			font-size: 2em;
			font-weight: 300;
		}
			.signature {
				display: block;
				width: 10ch;
				height: auto;
				margin-top: 1em;
				pointer-events: none;
				user-select: none;
			}

@media(prefers-reduced-motion){
	.wave {
		animation: none;
	}
}

@media(prefers-color-scheme: dark){
	:root {
		--color__bg: var(--color__black--monokai);
		--color__fg: var(--color__white--monokai);
	}
		.signature {
			filter: invert(1);
		}
}

@keyframes wave {
	from { rotate: 0deg;  }
	to   { rotate: 10deg; }
}