@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;
	font-weight: normal;
	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-image: url("/style-components/background-light.png");
	}

	div.page, table {
		background-color: white;
	}
}
@media (prefers-color-scheme: dark) {
	body {
		background-image: url("/style-components/background-dark.png");
	}

	div.page, table {
		background-color: black;
	}
}

/* Section: Navigation formatting */

table {
	text-align: left;
}

thead.numbered {
	text-align: center;
}

th {
	font-weight: bold;
}

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

}
.juxtapose-child {
	min-width: 10em;
	float: left;
}
.juxtapose-child.juxtapose-2 {
	width: 16%;
}
.juxtapose-child.juxtapose-3 {
	width: 24%;
}
.juxtapose-child.juxtapose-4 {
	width: 33%;
}
.juxtapose-child.juxtapose-6 {
	width: 50%;
}
.juxtapose-child.juxtapose-8 {
	width: 66%;
}
.juxtapose-child.juxtapose-9 {
	width: 75%;
}
.juxtapose-child.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;
}

/* 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;
		border: 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;
	}
}

.delta-trademark {
	font-variant: small-caps;
	color: #49c2a5ff;
}

/* Section: Usability tweaks */

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