@layer components {
	.blink {
		animation: blink 1s steps(1, end) infinite;
		-webkit-font-smoothing: antialiased
	}

	@keyframes blink {
		0%   { opacity: 1 }
		50%  { opacity: 0 }
		100% { opacity: 1 }
	}

	@media (prefers-reduced-motion: reduce) {
		.blink {
			animation: none;
			opacity: 1
		}
	}
}

:root {
	font: 400 1rem/1.5 monospace;

	color-scheme: light dark;
	color: rgba(255, 255, 255, 0.87);
	background-color: black;
	line-height: 1.5;

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

ul:not(.list-none),
ol:not(.list-none),
ul:not(.list-none) li,
ol:not(.list-none) li { padding-left: .5rem }

ul:not(.list-none) li::marker,
ol:not(.list-none) li::marker { content: '*' }

body {
	margin: 0;
	min-height: 100vh
}

h1 { font-size: 2.2em; line-height: 1.1 }
h2 { font-size: 1.4em; line-height: 1.1 }
h3 { font-size: 1.125em; line-height: 1.1 }

pre { overflow: scroll }

a:hover { text-decoration: underline }

p { margin-block: 15px }

code { background-color: #181818; padding: 2px }
pre { background-color: #181818; padding: 4px 10px; margin-block: 1rem }