@layer base {
	:root {
		--font-monospace: 'DM Mono', monospace;
		--font-sans-serif: 'DM Sans', arial, sans-serif;

		--sub-background-color: #181823;
		--background-color: #292437;
		--highlight-color: #38314b;
		--comment-color: #7080B0;
	 	--text-color: #F8F8F2;
		--text-selection-color: #474a77;
		--primary-color: #50FA7B;
		--string-color: #F1FA8C;
		--keyword-color: #FF79C6;
		--meta-color: #BD93F9;
		--name-color: #8BE9FD;
		--parameter-color: #FFB86C;
		--error-color: #FF5555;
	}
	html, body {
		width: 100%; margin: 0;
		scroll-behavior: smooth; scroll-padding: 6rem 0;
	}
	body {
		padding-top: 4.5rem;
		color: var(--text-color); background: var(--sub-background-color);
		font: 1rem / 1.75 var(--font-sans-serif);
	}
	.sr-only {
		width: 1px; height: 1px; padding: 0; margin: -1px;
		position: fixed; inset: 4rem 0 auto auto;
		overflow: hidden;
	}
	h1 {
		margin: 1.5em 0 1em;
		font-size: clamp(2rem, 4vw + 1rem, 3rem);
	}
	h2 {
		margin: 2em 0 1em;
		font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
	}
	h3 {
		margin: 1em 0 .5em;
		font-size: clamp(1.25rem, 2vw + .75rem, 1.75rem);
	}
	code {
		padding: .125em .5em;
		background-color: var(--background-color);
		border-radius: .5em;
		font-family: var(--font-monospace);
		ui-callout & { padding: .125em .25em; }
	}
	a {
		color: var(--name-color);
		text-decoration: .1em underline;
		text-underline-offset: .3em;
		transition: text-underline-offset .15s;
		&:hover { text-underline-offset: .2em; }
		&[href^="http"]::after {
			content: url("data:image/svg+xml, \
				%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E \
					%3Cpath d='M6 1H9V4V1L4 6M4 2H1V9H8V6' stroke='%238BE9FD' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E \
				%3C/svg%3E \
			");
			display: inline-block; width: .875rem; margin: 0 0 0 .3ch;
			line-height: .875rem;
			vertical-align: -.1em;
		}
	}
	::selection {
		background-color: var(--text-selection-color);
	}
}