:root {
	--color-black:        #000000;
	--color-red:          #fc5d7c;
	--color-green:        #9ed072;
	--color-yellow:       #e7c664;
	--color-blue:         #76cce0;
	--color-purple:       #b39df3;
	--color-cyan:         #76cce0;
	--color-white:        #e2e2e3;
	--color-light-black:  #121212;
	--color-light-red:    #fc5d7c;
	--color-light-green:  #9ed072;
	--color-light-yellow: #e7c664;
	--color-light-blue:   #76cce0;
	--color-light-purple: #b39df3;
	--color-light-cyan:   #76cce0;
	--color-light-white:  #f2f2f3;
}
html, body {
	box-sizing: border-box;
}
html {
	margin: 0;
}
body {
	margin: 0 auto;
	padding: 2rem 2rem;
	max-width: 80ch;
	font: 1rem/1.5 monospace;
	color: var(--color-light-black);
	background-color: var(--color-light-white);
}
strong {
	color: var(--color-black);
}
/* Navigation menu. */
nav {
	margin: 1rem 0;
}
nav ul {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	list-style-type: none;
} 
nav ul li {
	display: inline;
	padding: 0 1rem;
}
nav ul li a {
	display: inline-block;
	padding: 0 0.5rem;
	text-decoration: none;
	font-weight: bold;
}
/* Footer. */
footer {
	padding-top: 1rem;
	font: 0.8rem sans-serif;
	text-align: center;
}
/* Titles. */
h1, h2, h3 {
	padding-top: 1rem;
}
h2::before {
	content: "> ";
}
/* Lists. */
ul {
	list-style: "- ";
}
/* Links. */
a {
	color: inherit;
}
a:hover {
	color: var(--color-blue);
}
/* Code. */
pre {
	overflow: auto;
	margin: 1rem;
	padding: 1rem;
	border: 1px solid var(--color-black);
	background-color: var(--color-white);
}
/* Logo and favicon. */
.logo-link {
	display: inline-block;
}
.logo {
	height: 1.5rem;
	font-size: 1.5rem;
	font-weight: bold;
	pointer-events: none;
}
svg.logo {
	fill: var(--color-black);
}

/* Remove borders in small screens. Using em as Safari is buggy with rem. */
@media screen and (max-width: 80ch) {
	html {
		padding: 0;
	}
	body {
		margin: 0;
	}
	nav ul li {
		display: block;
		padding: 0 1rem;
	}
	nav ul li a {
		padding: 0.5rem 0;
	}
}

/* Set colors for dark colorscheme. */
/* If wanted, in Firefox set ui.systemUsesDarkTheme to integer 1. */
@media (prefers-color-scheme: dark) {
	body {
		color: var(--color-white);
		background-color: var(--color-black);
	}
	strong {
		color: var(--color-light-white);
	}
	a:hover {
		color: var(--color-cyan);
	}
	pre {
		border: 1px solid var(--color-light-white);
		background-color: var(--color-light-black);
	}
	svg.logo {
		fill: var(--color-white);
	}
}

/* Use full page and serif fonts when printing. */
@media print {
	body {
		margin: 0;
		max-width: none;
		font-family: serif;
	}
	.site-title, nav, footer {
		display: none;
	}
}