body {
	background: white;
	color: black;
	font-family: "IBM Plex Sans Var", "IBM Plex Sans", "Trebuchet MS", "Noto Sans", "Helvetica", "Gill Sans", "Frutiger", "Univers", "Akzidenz-Grotesk", "Tahoma", "Arial", system-ui, ui-sans-serif, sans-serif;
	text-rendering: optimizeSpeed !important;
}

.text {
	font-family: "IBM Plex Serif", "Georgia", "Liberation Serif", "Palatino", "Lucida Bright", "Roboto Slab", "Roboto Serif", "Noto Serif", "DejaVu Serif", "Cambria", "Times New Roman", "Times", ui-serif, serif;
}

code, pre, input, textarea, .mono, kbd, var, samp, .color-box {
	font-family: "IBM Plex Mono", "Inconsolata", "Andale Mono", "SF Mono", "Menlo", "Liberation Mono", "Courier", "Courier New", ui-monospace, monospace;
	white-space: pre-line;
}

.screen-readers-only {
/* Adapted from https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ */
   position: absolute !important;
   left: -9999px !important;
   /* I omitted the top portion so Ctrl-F will still find the hidden text where it's supposed to be, rather than indiscriminately the top of the page. */
}

.sticky, .date, h1, h2, h3, h4, h5, h6 {
	width: auto;
	display: block;
	margin: 0 !important;
	text-align: center !important;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 29px;
}

h4 {
  font-size: 26px;
}

h5 {
  font-size: 24px;
}

h6 {
  font-size: 21px;
}

.spoilers {
  /* This is meant for spoiler warnings, not to obscure text that is a spoiler. */
	font-size: 19px;
	font-weight: 700;
	font-style: italic;
	color: firebrick;
}

.navlink, .lightswitch {
  display: inline-block;
  line-height: normal;
  text-align: center;
  font-size: 21px;
  margin: auto;
}

.lightswitch {
  text-shadow: 1px 1px 0 slategray; /* This gives the emoji some contrast against the default light gray background of a button */
}

summary {
  cursor: pointer;
}

blockquote {
	border-left: 3px solid slategray;
	line-height: 1.333;
	padding: 8px 24px;
	margin: 16px 0;
}

thead, th {
	padding: 5px;
}

table, td {
	border: 1px solid slategray;
}

td {
	padding: 5px;
}

hr, hr.small, hr.section {
	border-color: slategray;
}

hr.small {
	/* For transitioning between story and non-story text */
	max-width: 75%;
}

hr.section {
	/* For sections within a single work */
	max-width: 10%;
}

.color-box {
/* Example usage (capitalize hex values for the public-facing page!):
<span class="color-box" style="background:#FFF8E7; color:black">#FFF8E7</span> */
	border: 1px solid slategray;
}

img {
	width: auto;
	height: auto;
	max-width: 100%;
	display: block;
	margin: 7px 0;
	/* This ensures large images are scaled down to fit horizontally in the window or on the screen, as the case may be */
}

.buttons img {
	display: inline-block;
}

a:link, a:visited {
	text-decoration: underline;
}

a:hover, a:active {
	text-decoration: none;
}

a:link {
	color: #0066cc;
}

a:visited {
	color: #551a8b;
}

a:active {
	color: red;
}

/* TODO:
Add some rudimentary formatting to make nav-link buttons look prettier.  Maybe just make the text bigger, matching the fancy CSS?  The lightswitch button should match.
*/