@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
	--black: 0 0 0;
	--white: 1 1 1;
	--dark: 0 0 0.08;
	--light: 0.8 0.88 0.88;
	--orange: 1.0 0.36 0;

	--bg: var(--dark);
	--text: var(--light);

	--link: var(--blue);
	--visited: var(--purple);
	--active: var(--red);
	--hover: var(--pink);

	--serif: Georgia -apple-system-ui-serif, ui-serif, serif;
	--sans: "Bebas Neue", -apple-system, ui-sans-serif, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	--mono: "Space Mono", Monaco, ui-monospace, SFMono-Regular, "Andale Mono", "Ubuntu Mono", monospace;
}

html {
	background-color: color(display-p3 var(--dark) / 1);
	background-position: center;
	background-repeat: repeat-x;
	background-size: 96em, auto;
	display: flex;
	font-synthesis: none;
	margin: auto;
	min-height: 100vh;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	scroll-behavior: smooth;
	scroll-padding-top: 1em;
}

body {
	color: color(display-p3 var(--text) / 1);
	font-family: var(--mono);
	font-size: 1em;
	margin: auto;
	max-width: 32em;
	min-width: 0;
	padding: 2em;
}

body.wide {
	max-width: 72em;
}

h1, h2, h3, h4, h5, h5 {
	font-family: var(--sans);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.125em;
}

h1 {
	font-size: 3em;
	margin: .5em 0;
}

h1 a {
	text-decoration: none;
}

a {
	color: color(display-p3 var(--orange) / 1);
}

p {
	line-height: 1.5em;
	margin: 1em 0;
}

nav {
	margin: 0 0 2em;
	border-color: color(display-p3 var(--text) / 0.125);
	border-style: solid;
	border-width: 2px 0;
	padding: 1em 0;
	text-transform: uppercase;
	font-weight: 700;
	font-style: normal;
	font-size: 1.25em;
	letter-spacing: .062em;
}

hr {
	border: none;
    border-bottom: 4px solid color(display-p3 var(--text) / 0.125);
    margin: 2em 0;
}

.note {
	background-color: color(display-p3 var(--text) / 0.08);
	border-radius: 4px;
	color: color(display-p3 var(--text) / 0.5);
	padding: 2em;
	font-size: .75em;
	margin-top: 4em;
}

footer {
	color: color(display-p3 var(--text) / 0.5);
	font-size: 0.75em;
	margin-top: 4em;
}