:root {
	background-color: black;
	color: white;

	font-family: "M PLUS 1", sans-serif;
  	font-optical-sizing: auto;
	font-size: 16px;

	max-width: 100vw;
	overflow-x: clip;
}
body {
	margin: 0;
	max-width: 100vw;
	overflow-x: clip;
}
.header-title {
	font-size: 3em;
	margin-top: 1.5em;
	margin-bottom: 0em;
	font-weight: bold;
}
h1, .header-one {
	font-size: 2.5em;
	margin-top: 1em;
	margin-bottom: 0em;
}
h2, .header-two {
	font-size: 1.5em;
	margin-top: 1.5em;
	margin-bottom: 0em;
}
h3, .header-three {
	font-size: 1.5em;
	font-weight: normal;
	margin-top: 1em;
	margin-bottom: 0em;
}
h4, .header-four {
	font-size: 1.25em;
	margin-top: 1em;
	margin-bottom: 0em;
}
p {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}
ul {
	margin-top: 0.4em;
}
a {
	color: inherit;
}
a.page-link {
	color: var(--page-highlight);
	text-decoration: underline;
	text-decoration-color: transparent;

	transition: text-decoration-color 0.3s ease, filter 0.3s ease;
}
a.page-link:hover, a.page-link:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--page-highlight);

	filter: brightness(1.5);
}



@property --page-highlight {
	syntax: '<color>';
	inherits: true;
	/* initial-value: #05c1e6; */
	initial-value: #ff0000;
}

.main-column {
	max-width: min(800px, 100% - 16px * 2);
	margin: 0 auto;
}



pre {
	font-family: "IBM Plex Mono", monospace;
  	font-weight: 400;
  	font-style: normal;
}