/* color themes */
:root {
	--outer-margins: 1em;
	--bgcolor: white;
	--textcolor: black;
	--weakcolor: grey; /* used for borders and shadows */
	--buttonbgcolor: #eee;
	--tintcolor: #ddd; /* used for cards and other tinted areas; stronger tint than code */
	--codecolor: #eee;
	--linkcolor: #00e;
	--linkvisitedcolor: #50a;
	--yellowcolor: #aa0; /* yellow needs to be darker on a white background to look good */
	--notecolor: #090;
}
[data-theme="dark"] {
	--bgcolor: #080808;
	--textcolor: white;
	--weakcolor: grey;
	--buttonbgcolor: #ddd;
	--tintcolor: #444;
	--codecolor: #282828;
	--linkcolor: #07f;
	--linkvisitedcolor: #b0f;
	--yellowcolor: #ff0;
	--notecolor: #9f9;
}
a {
	color: var(--linkcolor);
}
a:visited {
	color: var(--linkvisitedcolor);
}
.yujiri-link, .yujiri-link:visited {
	color: yellow;
}

/* body and general */
body {
	font-family: system-ui, sans-serif;
	margin: 0; /* Remove UA edge spacing */
	padding-bottom: 3em;
	background-color: var(--bgcolor);
	color: var(--textcolor);
}
article {
	margin: var(--outer-margins);
	margin-top: calc(var(--outer-margins) + 1em);
}
* {
	box-sizing: border-box;
}

/* navbar */
.navbar {
	position: sticky;
	top: 0;
	width: 100%;
	padding: 0.3em;
	background-color: grey;
	color: white;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
nav {
	font-size: 1.25em;
	text-align: center;
}

/* column-layout pages */
div.row {
	display: grid;
	grid-gap: 1em;
}
div.column {
	min-width: 18em;
}

/* content styles */
code, pre {
	font-family: monospace, monospace;
	background-color: var(--codecolor);
	white-space: pre-wrap;
	word-break: break-word;
}
spem {
	font-family: monospace, monospace;
}
.highlight {
	background-color: #ff06;
}
.note:before {
	content: '[';
}
.note:after {
	content: ']';
}
.note {
	color: var(--notecolor);
}
.spoiler, .spoiler * {
	background-color: var(--textcolor);
}
/* this is necessary to stop links from showing through */
.spoiler:not(:hover) * {
	color: var(--textcolor);
}
.spoiler:hover {
	color: var(--bgcolor);
}
summary {
	cursor: pointer;
}
details {
	margin-bottom: 1em;
}
blockquote {
	border-left: 6px solid #00ffff;
	margin: 0.5em 1em 0.5em 1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}
hr {
	border-color: var(--weakcolor);
}
.indent {
	margin-left: 1em;
}
/* stuff for reviews */
.good {
	color: blue;
}
.bad {
	color: red;
}
.mixed {
	color: var(--yellowcolor);
}

/* tables */
table {
	width: 100%;
}
th.par, td.par {
	min-width: 30em;
}
table, th, td {
	border: 1px solid var(--weakcolor);
	border-collapse: collapse;
	text-align: center;
}
tbody.checkered tr:nth-child(odd) {
	background-color: var(--codecolor);
}

/* section links */
:not(:hover) a.sectionlink {
	visibility: hidden;
}
a.sectionlink {
	color: inherit;
	font-size: 0.75em;
	margin-left: 0.5em;
}
a.sectionlink:visited {
	color: inherit;
}
/* stop the navbar from covering document fragments */
:target::before {
	content: "";
	display: block;
	height: 5rem;
	margin-top: -5rem;
}

/* Stop things from overflowing horizontally */
pre {
	overflow-x: auto;
}
img {
	max-width: 100%;
}
/* Middle finger to you browsers. I will not let you mutilate my h1s into h2s inside <article>. */
h1 {
	font-size: 2em;
	margin-block-start: 0.67em;
	margin-block-end: 0.67em;
}

:root[data-theme="dark"] .pygments  { background: #232629; color: #fff }
:root[data-theme="dark"] .pygments .c, :root[data-theme="dark"] .pygments .c1, :root[data-theme="dark"] .pygments .cm { color: #aaa; font-style: italic } /* comments */
:root[data-theme="dark"] .pygments .ch { color: #aaa; font-style: italic } /* shebang */
:root[data-theme="dark"] .pygments .cp, :root[data-theme="dark"] .pygments .cpf { color: #777; font-style: italic } /* preprocessor */
:root[data-theme="dark"] .pygments .cs { color: #777; font-style: italic } /* special comment */
:root[data-theme="dark"] .pygments .gp { color: #fff } /* 'generic prompt' */
:root[data-theme="dark"] .pygments .k, :root[data-theme="dark"] .pygments .kr { color: #99f; font-weight: bold } /* keywords */
:root[data-theme="dark"] .pygments .kd { color: #ff0 } /* declaration */
:root[data-theme="dark"] .pygments .kc { color: #0f0 } /* constant */
:root[data-theme="dark"] .pygments .kn { color: #99f; font-weight: bold } /* 'namespace' (`package` and `import` in Go) */
:root[data-theme="dark"] .pygments .kp { color: #7686bb; font-weight: bold } /* pseudo */
:root[data-theme="dark"] .pygments .kt { color: #f7f } /* type */
:root[data-theme="dark"] .pygments .w { color: #bbbbbb } /* 'whitespace' */
:root[data-theme="dark"] .pygments .p, :root[data-theme="dark"] .pygments .o { color: #fb2 } /* punct and ops */
:root[data-theme="dark"] .pygments.m, :root[data-theme="dark"] .pygments .mi, :root[data-theme="dark"] .pygments .mb, :root[data-theme="dark"] .pygments .mo, :root[data-theme="dark"] .pygments .mh, :root[data-theme="dark"] .pygments .mf, :root[data-theme="dark"] .pygments.il { color: #4FB8CC } /* numbers */
:root[data-theme="dark"] .pygments .s, :root[data-theme="dark"] .pygments .sa, :root[data-theme="dark"] .pygments .sb, :root[data-theme="dark"] .pygments .sc, :root[data-theme="dark"] .pygments .sd, :root[data-theme="dark"] .pygments .sh, :root[data-theme="dark"] .pygments .sx, :root[data-theme="dark"] .pygments .sr, :root[data-theme="dark"] .pygments .ss, :root[data-theme="dark"] .pygments .s1, :root[data-theme="dark"] .pygments .s2, :root[data-theme="dark"] .pygments.dl { color: #5c9 } /* strings */
:root[data-theme="dark"] .pygments .se { color: #5c9 } /* escape */
:root[data-theme="dark"] .pygments .si { color: #5c9 } /* interpolation */
:root[data-theme="dark"] .pygments .vc { color: #7AB4DB; font-weight: bold } /* vars */
:root[data-theme="dark"] .pygments .vg { color: #BE646C; font-weight: bold }
:root[data-theme="dark"] .pygments .vi { color: #7AB4DB; font-weight: bold }
:root[data-theme="dark"] .pygments .vm { color: #7AB4DB; font-weight: bold }
:root[data-theme="dark"] .pygments .err { color: #a61717; background-color: #e3d2d2 }