website/static_raw/style.css

:root {
	--accent: #745016;
	--accent-hover: #000000;
	--toa: #ffffff;
	--text: #292929;
	--bg: #fafafa;
	--border: #737373;
	--link: #005b85;
	--link-on-dark: #1ab6ff;
	--visited: #680bea;
	--terminal-bg: #292929;
	--terminal-text: #cdb360;
	--dark-bg: #212121;
	--text-on-dark: #fafafa;
	--yellow: #db9d3b;
	--black: #292929;
}

@media (prefers-color-scheme: dark) {
	:root {
		--accent: #db9d3b;
		--accent-hover: #ffffff;
		--toa: #000000;
		--text: #fafafa;
		--bg: #292929;
		--border: #919191;
		--link: #38c0ff;
		--link-on-dark: #1ab6ff;
		--visited: #c7a4f9;
		--terminal-bg: #292929;
		--terminal-text: #cdb360;
		--dark-bg: #212121;
		--text-on-dark: #fafafa;
		--yellow: #db9d3b;
		--black: #292929;
	}
}

* {
	box-sizing: border-box;
	color: var(--text);
	background: var(--bg);
}

a {
	color: var(--link);
	text-decoration-color: var(--link);
}

a:visited {
	color: var(--visited);
	text-decoration-color: var(--visited);
}

a:hover, a:focus, a:visited:focus, a:visited:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

p {
	max-width: 80ch;
	font-family: "IBM Plex Serif", serif;
}

pre {
	font-family: Iosevka, monospace;
	background: var(--terminal-bg);
	color: var(--terminal-text);
	overflow: scroll;
	white-space: pre;
	max-width: 80ch;
	border: 2px solid var(--border);
	display: block;
	padding: 1rem;
	margin-bottom: 1rem;
}

code {
	font-family: Iosevka, monospace;
	background: var(--terminal-bg);
	color: var(--terminal-text);
	overflow: scroll;
	white-space: pre;
}

section {
	margin-bottom: 2rem;
	width: 85%;
	background: var(--dark-bg);
	color: var(--text-on-dark);
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: .5rem;
}

section > a {
	text-decoration: none;
}

section > a > h3 {
	background: var(--dark-bg);
	color: var(--link-on-dark);
	padding: .5rem 0;
	border-bottom: 1px solid #e9ecef;
	display: flex;
	flex-wrap: wrap;
	text-decoration: underline;
}

section > a:hover > h3,
section > a:focus > h3,
section > a:visited:focus > h3,
section > a:visited:hover > h3 {
	color: var(--accent);
}

section > a:visited > h3 {
	color: var(--visited);
}

section > a > p {
	margin-top: .5rem;
	font-size: 1rem;
	background: var(--dark-bg);
	color: var(--text-on-dark);
}

button, input[type=submit] {
	background: var(--accent);
	color: var(--toa);
	border: var(--text) 1px solid;
	cursor: pointer;
}

button:hover, button:active, button:focus,
input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
	background: var(--accent-hover);
}

button > a, button > a:hover, button > a:focus, button > a:visited:focus, button > a:visited:hover{
	background: inherit;
	color: var(--toa);
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Fira Sans", sans-serif;
}

body {
	margin: 1rem;
	display: flex;
	flex-wrap: wrap;
}

header {
	font-weight: bold;
	width: 100%;
	font-size: 3rem;
	font-family: "Fira Sans", sans-serif;
}

nav {
	width: 100%;
	margin-bottom: 2rem;
	font-family: Iosevka, monospace;
}

nav > ul {
	margin: .5rem 0;
	padding: 0;
	list-style-type: none;
}

nav > ul > li {
	display: inline;
}

main {
	max-width: 92%;
	flex-grow: 11;
	margin: 0 1rem 2rem 1rem;
}

input {
	border: var(--border) 1px solid;
	display: block;
	margin: .25rem 0 .75rem 0;
}

label {
	display: block;
	font-family: "Fira Sans", sans-serif;
}

aside {
	width: 200px;
	flex-grow: 1;
}

aside > a {
	display: block;
	font-family: Iosevka, monospace;
	margin-top: .1rem;
	margin-bottom: .5rem;
}

aside > label {
	display: block;
	padding-top: 1rem;
}
aside > hr + label {
	padding-top: 0;
}

.warning * {
	background: var(--yellow);
	color: var(--black);
}