www/assets/base.css

.black-theme {
	/* Black mode */
	--bg-0: #181818;
	--bg-1: #252525;
	--bg-2: #3b3b3b;
	--dim: #777777;
	--fg-0: #b9b9b9;
	--fg-1: #dedede;
	--red: #ed4a46;
	--green: #70b433;
	--yellow: #dbb32d;
	--blue: #368aeb;
	--magenta: #eb6eb7;
	--cyan: #3fc5b7;
	--orange: #e67f43;
	--violet: #a580e2;
	--br_red: #ff5e56;
	--br_green: #83c746;
	--br_yellow: #efc541;
	--br_blue: #4f9cfe;
	--br_magenta: #ff81ca;
	--br_cyan: #56d8c9;
	--br_orange: #fa9153;
	--br_violet: #b891f5;
}
.dark-theme {
	/* Dark mode */
	--bg-0: #103c48;
	--bg-1: #184956;
	--bg-2: #2d5b69;
	--dim: #72898f;
	--fg-0: #adbcbc;
	--fg-1: #cad8d9;
	--red: #fa5750;
	--green: #75b938;
	--yellow: #dbb32d;
	--blue: #4695f7;
	--magenta: #f275be;
	--cyan: #41c7b9;
	--orange: #ed8649;
	--violet: #af88eb;
	--br_red: #ff665c;
	--br_green: #84c747;
	--br_yellow: #ebc13d;
	--br_blue: #58a3ff;
	--br_magenta: #ff84cd;
	--br_cyan: #53d6c7;
	--br_orange: #fd9456;
	--br_violet: #bd96fa;
}
.light-theme {
	/* Light mode */
	--bg-0: #fbf3db;
	--bg-1: #ece3cc;
	--bg-2: #d5cdb6;
	--dim: #909995;
	--fg-0: #53676d;
	--fg-1: #3a4d53;
	--red: #d2212d;
	--green: #489100;
	--yellow: #ad8900;
	--blue: #0072d4;
	--magenta: #ca4898;
	--cyan: #009c8f;
	--orange: #c25d1e;
	--violet: #8762c6;
	--br_red: #cc1729;
	--br_green: #428b00;
	--br_yellow: #a78300;
	--br_blue: #006dce;
	--br_magenta: #c44392;
	--br_cyan: #00978a;
	--br_orange: #bc5819;
	--br_violet: #825dc0;
}

#themes {
	background-color: var(--bg-0);
	border: none;
	color: var(--fg-1);
	font-size: 0.9em;
	padding: 14px 16px;
}

* {
	box-sizing: border-box;
}
html {
	background-color: var(--bg-0);
	color: var(--fg-0);
}
body {
	background-color: var(--bg-1);
	display: grid;
	grid-template-rows: auto 1fr auto;

	font-family: -apple-system, BlinkMacSystemFont,
		     "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
		     "Fira Sans", "Droid Sans", "Helvetica Neue",
		     sans-serif;

	font-feature-settings: "kern" 1;
	font-kerning: normal;
}
main {
	background-color: var(--bg-1);
	padding-left:1em;
	padding-right:1em;
	scrollbar-gutter: stable both-edges;
}
p {
	text-align: justify;
	hyphens: auto;
	text-justify: inter-character;
	overflow-wrap: anywhere;
}
pre,code {
	background-color: var(--bg-0);
	color: var(--fg-0);
	white-space: pre-wrap;
}
nav#TableOfContents ul {
	padding: 0;
	list-style-type: none;
}
nav#TableOfContents ul li ul {
	padding-left:1em;
}
nav#TableOfContents ul li ul li ul {
	padding-left:2em;
}
nav#TableOfContents ul li ul li ul li ul {
	padding-left:3em;
}
h1, h2, h3, h4, h5 {
	font-family: open, serif;
}
@media only screen and (min-width: 60rem) {
	body {
		max-width:60rem;
		margin-left: auto;
		margin-right: auto;
	}
}
.fullwidth {
	width: 100%;
}
img[src*='#center'] {
	display: block;
	margin: auto;
}

a {
	color: var(--yellow);
}
a:visited {
	color: var(--orange);
}
a:hover {
	color: var(--red);
}
h1,
body header nav ul li a,
body header nav ul li a:visited {
	color: var(--red);
}
h2, h3, h4, h5, h6 {
	color: var(--green);
}