@font-face {
  font-family: "B612";
  src: url("/style-components/B612-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "B612";
  src: url("/style-components/B612-Italic.ttf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "B612";
  src: url("/style-components/B612-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "B612";
  src: url("/style-components/B612-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "B612Mono";
  src: url("/style-components/B612Mono-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "B612Mono";
  src: url("/style-components/B612Mono-Italic.ttf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "B612Mono";
  src: url("/style-components/B612Mono-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "B612Mono";
  src: url("/style-components/B612Mono-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}

/* Section: Page setup */

:root {
  color-scheme: light dark;
}

body {
	font-family: "B612", sans-serif;
	line-height: 1.5;
	overflow-wrap: break-word;
	word-break: auto-phrase;
	hyphens: auto;
	text-align: justify;
}

div.page {
	border: solid 1px lightgray;
	border-radius: 5px;
	margin: 5%;
	padding: 20px;
}

h1 {
	font-variant: small-caps;
	margin: 0;
	border-radius: 5px;
	padding: 5px;
}

/* Set up highlight and background colors based on user preferences. */
@media (prefers-color-scheme: light) {
	body {
		background: repeating-linear-gradient(
			45deg,
			black,
			black 31px,
			#49c2a5 31px,
			#49c2a5 32px
		);
	}

	div.page {
		background-color: white;
	}

	h1, .incipit {
		color: #49c2a5ff;
		background-color: black;
	}
}
@media (prefers-color-scheme: dark) {
	body {
		background: repeating-linear-gradient(
			-45deg,
			black,
			black 31px,
			#49c2a5 31px,
			#49c2a5 32px
		);
	}

	div.page {
		background-color: black;
	}

	h1, .incipit {
		background-color: #49c2a5ff;
		color: black;
	}
}

/* Section: Navigation formatting */

.buttons-88x31 {
	display: table;
	list-style-type: none;
}

.buttons-88x31 > li {
	float: left;
	margin-left: 0px;
	margin-right: 0px;
	font-style: italic;
}

.content-notes {
	display: table;
}

.content-notes > li {
	float: left;
	margin-left: 15px;
	margin-right: 15px;
	font-style: italic;
}

table {
	text-align: left;
}

th {
	font-weight: bold;
}
td.header {
	font-weight: bold;
}

.webring {
	border: solid 1px black;
	padding: 5px;
}


/* Section: Aligning etc */
.juxtapose-parent {
	float: left;

}
.juxtapose-child {
	min-width: 10em;
	float: left;
}
.juxtapose-spacer {
	float: left;
}
.juxtapose-1 {
	width: 8%;
}
.juxtapose-2 {
	width: 16%;
}
.juxtapose-3 {
	width: 24%;
}
.juxtapose-4 {
	width: 33%;
}
.juxtapose-6 {
	width: 50%;
}
.juxtapose-8 {
	width: 66%;
}
.juxtapose-9 {
	width: 75%;
}
.juxtapose-10 {
	width: 83%;
}

.juxtapose-child .juxtapose-contents {
	margin: 10px;
	padding: 10px;
}

/* Section: Images into the text */
img.fill-box {
	width: 100%;
	margin: auto;
	display: block;
}

img.inline-illustration {
	vertical-align: middle;
}
img.figure {
	max-width: 100%;
	border-radius: 2em;
}
p.caption {
	text-align: center;
}

/* Section: Further image options */
.hover-sprite-88x31 {
	overflow: hidden;
	height: 31px;
}

.hover-sprite-88x31 div {
	height: 62px;
}
.hover-sprite-88x31 div:hover {
	position: relative;
	top: -31px;
}

.hover-sprite-88x31 img {
	height: 62px;
}

img.pixel-art {
	image-rendering: pixelated;
}

/* Section: Special effects */

a.button {
	border-radius: 5px;
	margin: 1em;
	padding: 5px;
}

@media (prefers-color-scheme: light) {
	a.button {
		background-color: black;
		color: #49c2a5ff;
	}
	a.button:hover {
		background-color: #49c2a5ff;
		color: black;
	}
}
@media (prefers-color-scheme: dark) {
	a.button {
		background-color: #49c2a5ff;
		color: black;
	}
	a.button:hover {
		background-color: black;
		color: #49c2a5ff;
		outline: solid 1px white;
	}
}

a.button-disabled {
	border-radius: 5px;
	margin: 1em;
	padding: 5px;
}

@media (prefers-color-scheme: light) {
	a.button-disabled {
		background-color: gray;
		color: #49c2a5ff;
	}
}
@media (prefers-color-scheme: dark) {
	a.button-disabled {
		background-color: gray;
		color: black;
	}
}

.bot-quote {
	font-family: monospace;
}

.danger-sign {
	color: white;
	background-color: #bd2024;
	font-variant: small-caps;
	font-weight: bold;
}

.delta-trademark {
	font-variant: small-caps;
}

.delta-44203-name {
	font-family: "B612Mono", monospace;
}

.glitch {
	filter:
		drop-shadow(0.1em 0.2em #49c2a55f)
		drop-shadow(-0.1em -0.2em #49c2a55f)
		blur(1px)
		invert(100%)
		contrast(2)
		drop-shadow(0.1em 0.75em #49c2a55f)
		drop-shadow(-0.1em -0.75em #49c2a55f);
}

.incipit {
	font-weight: bold;
	border-radius: 2px;
	padding: 2px;
}

.incipit strong {
	font-style: italic;
	text-decoration: wavy underline;
}

.near-unreadable {
	font-size: 0.8em;
	text-decoration-line: line-through;
	text-decoration-thickness: 2px;
}

@media (prefers-color-scheme: dark) {
	.redacted {
		outline: dotted 2px white;
		color: transparent;
		background: repeating-linear-gradient(
			45deg,
			#ffffff10,
			#ffffff10 7px,
			#49c2a510 7px,
			#49c2a510 8px
		);
	}
}
@media (prefers-color-scheme: light) {
	.redacted {
		outline: dotted 2px black;
		color: transparent;
		background: repeating-linear-gradient(
			45deg,
			#00000010,
			#00000010 7px,
			#49c2a510 7px,
			#49c2a510 8px
		);
	}
}

.note-sign {
	color: white;
	background-color: #005387;
	font-variant: small-caps;
	font-weight: bold;
}

.note-sign > ul {
	list-style-type: "⚠️";
}

.safe-sign {
	color: white;
	background-color: #237F52;
	font-variant: small-caps;
	font-weight: bold;
}

.status {
}

.text-as-88x31 {
	outline: 1px solid;
	width: 88px;
	height: 31px;
	text-align: center;
	overflow: hide;
}

.text-as-88x31 > * {
	vertical-align: middle;
}

.update {
	font-family: "B612Mono", monospace;
}

.update-override {
	font-family: "B612Mono", monospace;
	filter:
		drop-shadow(0.15em 0.15em #49c2a55f)
		blur(0.5px);
}

div.update-override {
	margin-bottom: 1.5em;
}

/* Section: Usability tweaks */

/* Highlight the target (of href="#anchor" links) so it stands out a bit more. */
:target {
	font-weight: bold;
}