:root {
	--basic-fonts: "Source Sans 3", "Roboto Flex", "Roboto", "Noto Sans", system-ui, ui-sans-serif, sans-serif;
	
	--emoji-fonts: "Noto Color Emoji", "Twemoji", "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", emoji, system-ui;
	
	--sans-fonts-jp: "IBM Plex Sans JP", "BIZ UDPGothic", "Noto Sans JP", "Hiragino Sans", "Source Han Sans", "Source Han Sans JP", "Yu Gothic UI", "Yu Gothic";
	--serif-fonts-jp: "BIZ UDPMincho", "Iwa Mincho", "Hiragino Mincho", "Noto Serif JP", "Source Han Serif", "Source Han Serif JP", "Yu Mincho", var(--sans-fonts-jp);
	--mono-fonts-jp: "M PLUS 1 Code", "M PLUS 1m", "HackGen", "Cica", "Ricty Diminished", "Source Han Code", "Source Han Code JP", var(--sans-fonts-jp);

	--header-fonts: "Recursive", "Bahnschrift", "Gidole", "DIN 1451", "FF DIN", "Trispace", "Kanit", "Exo 2", var(--sans-fonts-jp), var(--basic-fonts), var(--emoji-fonts);
	--header-variations: "ITAL" 1, "CRSV" 0.5, "MONO" 0.51, "CASL" 0;
	
	--sans-fonts: "IBM Plex Sans Var", "IBM Plex Sans", "Atkinson Hyperlegible", "Bahnschrift", "Gidole", "DIN 1451", "FF DIN", "FiraGO", "Fira Sans", "Trebuchet MS", var(--sans-fonts-jp), var(--basic-fonts), var(--emoji-fonts);
	
	--serif-fonts: "Bitter", "Merriweather", "IBM Plex Serif", "Roboto Serif", "Roboto Slab", "Georgia", "Palatino", "Liberation Serif", "Lucida Bright", "Noto Serif", "DejaVu Serif", "Cambria", "Times New Roman", "Times", var(--serif-fonts-jp), ui-serif, serif, var(--emoji-fonts);
	
	--mono-fonts: "Recursive", "IBM Plex Mono", "Fira Code", "Fira Mono", "Iosevka", "League Mono", "JetBrains Mono", "Ubuntu Mono", "Inconsolata", "Menlo", "Monaco", "Andale Mono", "Liberation Mono", "Courier", "Courier New", var(--mono-fonts-jp), ui-monospace, monospace, var(--emoji-fonts);
	--mono-size: 0.9em;
	--mono-weight: 350;
	--mono-variations: "MONO" 1, "CASL" 0, "CRSV" 0.5;
	
	--link-transitions: color 0.1s, outline 0.1s, text-shadow 0.25s !important;
}

/* * {
  transition: background 1s, color 1s;
} */

/* BODY START */
html {
	/* font-size: 16px; /* This ignores a browser's default font size setting, which can be a hindrance for people with low vision.  The size of 1rem is at the user's discretion now, but in most cases will still be 16px. */
	scrollbar-gutter: stable both-edges;
}

body {
  /* TODO: Add something to give some modest margins to the left/right edges.  It tends to feel kinda cramped as it is now. */
	background: var(--body-bg);
	color: var(--body-text);
	font-family: var(--sans-fonts);
	font-size: 1em;
	font-weight: 400;
	font-variant: slashed-zero no-common-ligatures tabular-nums !important; /* Fuck common ligatures, all my homies hate common ligatures */
	font-feature-settings: "zero" 1, "liga" 0, "tnum" 1 !important; /* Slash those zeroes! Fuck those ligatures! Tabular those numerals! */
}

em, i, cite {
	font-style: italic; /* TODO: Once you've switched everything to use <em> or <cite>, consider relegating <i> for obliques instead of proper italics. */
	font-variation-settings: "SLNT" -15, "ITAL" 1, "CRSV" 1;
}

.text {
	font-family: var(--serif-fonts);
	line-height: 1.25em;
}

::selection {
	color: var(--select-text);
	background: var(--select-bg);
	text-shadow: 1px 1px 0 var(--select-shadow); /* Thanks to Steam's website for inspiring this addition */
}

/*
.spoiler-alert {
}
TODO: make a spoiler tag system using buttons and ARIA.  The HTML should look something like this:
<button class="spoiler-alert" aria-describedby="esb-spoiler">Click to reveal Empire Strikes Back spoiler!</button><span id="esb-spoiler" hidden>Darth Vader is Luke Skywalker's father 🤯</span>
The button formatting should appear as just text, albeit blurred to hell and back.  Make sure the text isn't readable/selectable before being properly revealed
*/

iframe {
/* I had intended to use an iframe for my nav page, but it struck me as more trouble than it's worth. */
  width: 100%;
  border: 2px solid var(--link-normal);
  margin: auto;
}

abbr {
  cursor: pointer; /* It's clickable thanks to some JavaScript chicanery, so it should look like it */
}

blockquote {
	border-left: 3.1415px solid var(--bullet);
	background: var(--altrow);
	line-height: 1.333;
	padding: 0.5em 1.5em;
	width: fit-content;
	margin: 1em 0;
}

details {
	cursor: auto;
	width: fit-content;
	height: fit-content;
	border-width: 1px;
	border-left-width: 0.25em;
	border-style: solid;
	border-color: var(--header-bg);
	margin-left: 1em;
	background: var(--altrow);
	padding: 0.25em;
}

details > summary {
	cursor: pointer; /* It's clickable, so it should look like it */
	background: var(--altrow);
	width: fit-content;
}

details > p {
	cursor: auto;
}

summary {
	transition: var(--link-transitions);
  cursor: pointer;
}

details > summary:hover, details:hover {
	border-color: var(--link-hover);
}

details[open] > summary { /* Open mode */
	border-bottom: 1px solid var(--link-active);
}

details[open] {
	border-color: var(--link-active);
	transition: border-color 0.1s;
}

summary::marker, details > ol li::marker {
	color: var(--bullet); /* Colors the numbers like bullet points */
}

.smallcaps, .smallcaps-b, .smallcaps-i, .smallcaps-bi { /* TODO: in the interests of using semantically superior tags, like <strong> and <em> over <b> and <i>, I suspect the way to best do this is <em class="smallcaps"> or <strong class="smallcaps">, rendering the -b, -i, and -bi variants redundant. */
	font-variant: small-caps;
	font-variant-caps: small-caps;
	font-feature-settings: "smcp" on;
}

.smallcaps-b {
	font-weight: 700;
}

.smallcaps-i {
	font-style: italic;
}

.smallcaps-bi {
	font-style: italic;
	font-weight: 700;
}

/* oh hi */ mark {
	color: var(--bullet);
	background: transparent !important; /* This is to override the default functionality, which provides a garish yellow highlighter color */
	text-shadow: var(--mark) 0 0 0.6667em;
}

.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 var(--code);
}

.logo {
/* The end of every document, before </body>, should include the following:
<hr>
<a class="invisilink" href="/nav"><img class="logo" alt="Delta7447 logo" src="/images/delta7447.svg"></a>
<script src="/lightswitch.js"></script>
*/
  width: 6em;
  float: right;
  bottom: 0.75em;
  right: 1em;
  padding-top: 0.25em;
  position: sticky !important;
  display: block;
  z-index: 7447; /* This should always be on top, with sticky headers in second place, below everything else. */
  /* It would seem that the width of the works page causes problems with the positioning of the logo.  Optimizing that table (possibly all tables) for mobile might fix that */  
}

.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. */
}
/* BODY END */

/* BUTTONS START */
/* 88x31 buttons first, then more conventional buttons */
.buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.buttons img {
	height: 31px;
	text-decoration: none !important;
	margin: 2px !important;
	vertical-align: middle;
	outline: none !important;
	content: none;
}

img::selection {
	text-shadow: none; /* This will ensure shadows don't appear while selecting images.  This is most visible while selecting buttons, since they get larger when hovered over */
}

.buttons a[href] {
  outline: none !important; /* This removes the outlines used on standard links from the buttons */
  content: none !important; /* You'd THINK this removes the arrow from the buttons with external links.  DOES it though? */
  /* font-size-adjust: 0; /* This "works" but doesn't truly remove the arrow, so it may cause issues with screen readers. */
}

.buttons a[href]::after {
  content: none !important; /* As it turns out, THIS is what I needed to get the damn arrow emoji to fuck off for real.  I hate to admit that ChatGPT was helpful in resolving this problem. */
}

.navlink, .navlink:hover, .navlink:active, .lightswitch, .lightswitch:hover, .lightswitch:active {
	border-width: 2px;
	border-style: solid;
}

.navlink, .lightswitch {
  display: inline-block;
  background: var(--header-bg) !important;
  color: var(--header-text) !important;
  outline: 0 !important;
  border-color: var(--link-normal);
  line-height: normal;
  font-family: var(--header-fonts);
  font-variation-settings: var(--header-variations);
  text-align: center;
  font-size: 1.333em;
  margin: auto;
  transition: border 0.1s, box-shadow 0.25s !important;
}

.navlink {
	width: 15em;
	font-family: var(--header-fonts);
}

.lightswitch {
	width: auto;
	font-family: var(--emoji-fonts);
}

.navlink:hover, .lightswitch:hover {
  color: var(--header-text) !important;
  border-color: var(--link-hover);
  box-shadow: 0 0 1.25em var(--link-hover);
  transition: border 0.1s, box-shadow 0.25s !important;
}

.navlink:active, .lightswitch:active {
  color: var(--header-text) !important;
  border-color: var(--link-active);
  box-shadow: 0 0 1.25em var(--link-active);
  transition: border 0s, box-shadow 0s !important;
}

.navlink:focus, .lightswitch:focus {
	outline-style: double !important;
	outline-color: var(--link-normal) !important;
	outline-width: 0.25em !important;
	transition: outline 0.1s, box-shadow 0.25s !important;
}

.navlink:hover:focus, .lightswitch:hover:focus {
	outline-color: var(--link-hover) !important;
}

.navlink:active:focus, .lightswitch:active:focus {
	outline-color: var(--link-active) !important;
}
/* BUTTONS END */

/* CODE START */
.mono, code, pre, textarea, .color-box {
  font-family: var(--mono-fonts);
  font-weight: var(--mono-weight);
  font-size: var(--mono-size);
  font-variation-settings: var(--mono-variations);
  font-feature-settings: "dlig" 1;
}

code {
  /* Meant to parallel Discord's `code blocks`, with some added Wikipedia-esque formatting */
  background: var(--altrow);
  color: var(--code);
  border: 1px solid var(--code);
  white-space: pre-wrap;
}

pre {
  /* Adapted from https://stackoverflow.com/questions/4000792/how-can-i-style-code-listings-using-css/48694906#48694906 */
  /* Meant to parallel Discord's ```multi-line code blocks``` */
  background: var(--altrow);
  color: var(--code);
  border-left: 3.1415px solid var(--bullet);
  page-break-inside: avoid;
  line-height: 1.333;
  margin-bottom: 1.5em;
  max-width: 100%;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
  word-wrap: break-word;
  white-space: pre-wrap;
}

textarea {
  background: var(--altrow);
  border: 1px solid currentcolor;
  outline: 1px solid currentcolor;
  color: var(--code);
  transition: outline 0.1s, box-shadow 0.5s;
  /* In the HTML, you'll want to specify a row and column count.  80 columns is a common practice for plain text emails.  Rows should be whatever comfortably fits the text included--maybe add 1 so the scrollbar doesn't appear. */
}

textarea:hover {
  outline: 1px solid var(--link-hover);
  transition: outline 0.1s, box-shadow 0.5s;
}

textarea:focus {
  outline: 2px solid var(--link-active);
  box-shadow: 0 0 1em var(--link-active);
  transition: outline 0.1s, box-shadow 0.5s;
}
/* CODE END */

/* COLORS START */
.art {
  color: var(--art) !important;
}

.caption {
  color: var(--caption) !important;
}

.rplog {
  color: var(--rplog) !important;
}

.story {
  color: var(--story) !important;
}

/* Ditto, only stoplight colors for my fetishes, ala traditional safewords: https://en.wikipedia.org/wiki/Safeword */
.like {
  color: var(--like) !important;
}

.neutral {
  color: var(--neutral) !important;
}

.dislike {
  color: var(--dislike) !important;
}

/* flt- classes for the Fetish List Table */
.flt-like td, .flt-neutral td, .flt-dislike td {
	border-width: 1px;
	border-style: solid;
}

.flt-like td {
  border-color: var(--like) !important;
}

.flt-neutral td {
  border-color: var(--neutral) !important;
}

.flt-dislike td {
  border-color: var(--dislike) !important;
}
/* COLORS END */

/* FONTS START */
@font-face {
	font-family: "Bitter";
	font-display: swap;
	font-style: normal;
	font-weight: 100 900;
	src: url("/fonts/Bitter.woff2");
}

@font-face {
	font-family: "Bitter";
	font-display: swap;
	font-style: italic;
	font-weight: 100 900;
	src: url("/fonts/Bitter-Italic.woff2");
}

@font-face {
	font-family: "IBM Plex Sans Var";
	font-display: swap;
	font-style: normal;
	font-weight: 100 700;
	src: url("/fonts/IBM Plex Sans Var-Roman.woff2");
}

@font-face {
	font-family: "IBM Plex Sans Var";
	font-display: swap;
	font-style: italic;
	font-weight: 100 700;
	src: url("/fonts/IBM Plex Sans Var-Italic.woff2");
}

@font-face {
	font-family: "Recursive";
	font-display: swap;
	font-style: normal; /* Edge and other Chromium shit doesn't like it if a variable font like Recursive with built-in italics.  It will synthesize italics, compounding the already-present slant rendered properly by the font.  Including this line fixes it, but it has to be on "normal", otherwise everything will be italicized. */
	font-weight: 300 1000;
	src: url("/fonts/Recursive_VF_1.085--subset-GF_latin_basic.woff2");
	/* I'm pretty sure Recursive's fancy OpenType features (like the dotted zero, code ligatures, etc) aren't included in this subset. The base file (which is larger) does include those though. I need to determine if the larger file size is worth a few more ligatures. I'm leaning towards no, since the font isn't used exclusively for the whole site. */
}

/* Consider adding the following fonts:
- OpenDyslexic, as an override, if there's demand for it (https://opendyslexic.org/)

Consider these for handwriting:
- Caveat: generic handwriting, not particularly messy (https://github.com/googlefonts/caveat)
- Architects Daughter: maybe the handwriting for a sort of skilled engineer type who's also feminine? (https://fonts.google.com/specimen/Architects+Daughter)
- Shadows Into Light (Two): decently readable, also somewhat feminine (https://fonts.google.com/specimen/Shadows+Into+Light+Two/)
*/
/* FONTS END */

/* HEADER START */
.sticky {
  background-image: linear-gradient(to bottom, var(--body-bg) 85.58%, transparent); /* Slight upgrade from just a solid box */
  text-shadow: 0 0 2.5px var(--body-bg);
  color: var(--body-text);
  position: sticky !important;
  top: 0 !important;
  width: auto;
  display: block;
  padding: 0.25em;
  padding-bottom: 0.5em;
  margin: 0 !important;
  text-align: center !important;
  line-height: normal;
  font-variation-settings: var(--header-variations);
  /* box-shadow: 0 0 7.447px rgb(0,0,0,0.5); /* Unsuitable if the background matches the body background, or if it's a gradient to transparent */
  z-index: 7447 !important; /* MUST appear on top */
}

.date {
  font-family: var(--header-fonts);
  font-weight: 400;
  font-size: 1.25em;
  /* Post date should always immediately follow a header title */
  font-variation-settings: "MONO" 0.51, "CASL" 0, "SLNT" 0, "ITAL" 1, "CRSV" 1;
  margin: auto;
  text-align: center;
}

.toc { /* This is getting deprecated */
  font-family: var(--header-fonts);
  font-weight: 400;
  font-variation-settings: var(--header-variations);
  background: var(--altrow);
  /* line-height: 1.2em; */
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  padding: 7.447px;
  border: 1px solid var(--header-bg);
  box-shadow: 0 0 7.447px var(--select-shadow);
  /* TODO: This box should glow like an active button while it's visible. Mimic the code for buttons while they're pressed. */
}

nav.toc-nav {
	font-family: var(--header-fonts);
	font-variation-settings: var(--header-variations);
	font-weight: 500;
}

details.toc-details {
	width: -moz-fit-content;
	width: fit-content;
	font-size: 1.1em;
	margin-left: 1em;
	border: none;
	border-left-width: 0.2em; /* Mimicking the <blockquote> line */
	border-left-style: solid;
	border-left-color: var(--header-bg);
	background: var(--altrow);
	padding: 0.5em;
}

details.toc-details > a > p {
	width: fit-content !important;
}

details.toc-details > summary {
	font-size: 1.5em;
	margin-left: 0.45em;
	border: none;
	outline-width: 1px;
	outline-style: solid;
	outline-color: var(--link-normal); /* Mimicking link design language to hopefully better convey what this is */
	transition: var(--link-transitions);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; /* The header text shouldn't be selectable, mostly because clicking it repeatedly will cause the text to get selected. */
}

details.toc-details > summary:hover {
	outline-color: var(--link-hover);
}

details.toc-details[open] > summary { /* Open mode */
	outline-color: var(--link-active);
}

details.toc-details[open] {
	border-left-color: var(--bullet);
	transition: border-color 0.1s;
}

details.toc-details > ol li::marker {
	color: var(--bullet); /* Colors the numbers like bullet points */
}

details.toc-details li {
	line-height: 1.25em;
}

details.toc-details > ol {
	margin-bottom: 0;
}

.spoilers {
  /* This is meant for spoiler warnings, not to obscure text that is a spoiler. */
  font-size: 1.2em;
  font-weight: 666;
  font-style: italic;
  color: var(--dislike);
  font-family: var(--header-fonts);
  font-variation-settings: var(--header-variations);
}

h1, h2, h3, h4, h5, h6 {
  width: fit-content;
  font-family: var(--header-fonts);
  line-height: normal;
  font-variation-settings: var(--header-variations);
  text-align: center;
  display: block;
  margin: 1em 0;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.9em;
}

h3 {
  font-size: 1.8em;
}

h4 {
  font-size: 1.6em;
}

h5 {
  font-size: 1.5em;
}

h6 {
  font-size: 1.333em;
}
/* HEADER END */

/* HR START */
hr {
  /* For transitioning between works */
  border: none;
  border-top: 3px double var(--divider);
  color: var(--divider);
  overflow: visible;
  text-align: center;
  height: 6px;
}

hr.small {
  /* For transitioning between story and non-story text */
  border: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--divider), transparent);
  max-width: 74.47%;
}

hr.section {
  /* For sections within a single work */
    margin: 1em;
    padding-top: 0.25em;
    padding-bottom: 1.5em;
    border: 0;
    text-align: center;
}

hr.section:after {
    content: "⏤ § ⏤";
    font-size: 133.333%;
    font-family: var(--serif-fonts);
    display: block;
    text-align: center;
    background: transparent;
}
/* HR END */

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

img::before, img::after {
  content: ""; /* Broken image formatting: gray box with white alt text.  Contrasts enough with both light and dark theme backgrounds to just use one color for both */
  text-align: center;
  width: auto;
  display: block;
  padding: 10px;
  background: var(--gray);
  color: white;
  /* This doesn't appear as intended on Edge or Chromium, fuck knows why.  It does still look like a broken image though, so it's probably fine. */
}
/* IMAGE END */

/* LINK START */
a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	transition: var(--link-transitions);
}

a:link, a:visited {
  color: inherit;
}

a:link {
	outline: 1px solid var(--link-normal);
}

a:visited {
	outline: 1px solid var(--link-visited);
}

a:hover {
	color: var(--link-hover);
	outline: 1px solid var(--link-hover);
}

a:active {
	color: var(--link-active);
	outline: 2px solid var(--link-active);
}

a:focus {
	outline-style: double;
	outline-width: 4px;
}

a.invisilink {
  text-decoration: none !important;
  outline: 0 !important;
}
/* TODO: ensure the outline formatting presents hover/active over normal/visited links.  z-index doesn't seem to do that.  Moreover make sure the outlines aren't too close to the text, disrupting readability. */

/* This CSS adapted from a solution posted to Stack Overflow by Shaz: https://stackoverflow.com/a/5379820 */
/* This stuff adds a symbol (see below) alongside external links, ala Wikipedia */
a[href]:not(:where(
  [href^=""],
  /* exclude hash only links */
  [href^="#"],
  /* exclude relative but not double slash only links */
  [href^="/"]:not([href^="//"]),
  /* subdomains to exclude */
  [href*="//delta7447.neocities.org"],
  [href*="javascript:"], /* Javascript links, like the back button on the 404 page, shouldn't show up as external */
)):after {
/* content: url("/images/External.svg"); */
/* TODO: I can't for the life of me get this damn SVG to scale down.  In other words, the scalable vector graphic doesn't want to scale.  If I can get it to work though, I'd ideally like its colors to change the same way links do. */
/* If I'm able to get this SVG to work as intended, it wouldn't become italicized like the emoji arrow does--a small but existent disadvantage to my current setup. */
 content: "↗️"; 
}
/* End adapted CSS */
/* LINK END */

/* LIST START */
ul {
  list-style: none;
}

ul li::before {
  /* Adapted from https://www.w3schools.com/howto/howto_css_bullet_color.asp */
  content: "■";
  color: var(--bullet);
  font-size: 50%;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  position: relative;
  top: -3px;
  width: 2em;
  margin-left: -2em;
}

li {
  margin-bottom: 0.25em;
}
/* LIST END */

/* SCROLLBAR START */
/* Firefox doesn't do webkit-scrollbar, but it does do scrollbar apparently: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color  This allows the width and color to be adjusted, but with apparently not as much detail. */
::-webkit-scrollbar {
	width: auto;
	height: auto;
}
::-webkit-scrollbar-track {
	background: var(--body-bg);
}
::-webkit-scrollbar-thumb {
	background: var(--header-bg);
	box-shadow: inset 0 0 0 1px var(--select-bg, --select-bg-fb);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--link-hover);
}
::-webkit-scrollbar-thumb:active {
	background: var(--link-active);
}
::-webkit-scrollbar-track-piece {
	box-shadow: inset 0 0 0 1px var(--select-bg, --select-bg-fb);
	background: var(--altrow);
}
::-webkit-scrollbar-corner {
  background: inherit;
}

/* The following adds buttons on either end of the scrollbar.  I'm not sure they're really necessary, and so far I've been unable to add arrows to them.  How necessary ARE those buttons, really? */
/* ::-webkit-scrollbar-button:single-button {
	background: var(--altrow);
	box-shadow: inset 0 0 0 1px var(--select-bg, --select-bg-fb);
	background-repeat: no-repeat;
	height: auto;
	width: auto;
}
::-webkit-scrollbar-button:single-button:hover {
	background: var(--link-hover);
	box-shadow: none;
}
::-webkit-scrollbar-button:single-button:active {
	background: var(--link-active);
	box-shadow: none;
}
*/

/* TODO: add up/down/left/right arrows to these buttons.  It's probably self-explanatory enough which is which, but it looks wrong if the arrows aren't there.  Consider black triangles instead of SVGs drawn in the code.  Alternatively, make one SVG arrow and rotate it according to which arrow it's meant to be. */
/* SCROLLBAR END */

/* TABLE START */
thead, th {
  background: var(--header-bg);
  color: var(--header-text);
  font-family: var(--header-fonts);
  font-variation-settings: var(--header-variations);
  padding: 5px;
}

tr.table-sticky { /* Apply me to header row (NOT thead or th, but tr!) to make the headers sticky */
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important; /* This is so the custom bullet points go UNDER the sticky header */
}

table, td {
  border: 1px solid var(--header-bg);
  /* TODO: Consider making tables centered on the page? */
  /* TODO: Fandom wikis are set up so you can horizontally scroll a table independent of the entire page.  Implementing something like that is probably the way to go. */
  /* TODO: investigate https://css-tricks.com/responsive-data-tables/.  It has a neat trick to reformat a table entirely so its contents can be more easily read on a phone.  This is probably the key to getting the works table to look nice */
}

td {
  border: 1px solid var(--divider);
  padding: 5px;
}

tr:nth-child(even) {
  /* Every other row in a table is a slightly different color for clarity's sake */
  background: var(--altrow);
}

/* tr:hover {
  background: #;
} */
/* Specify a color here and the row that the cursor hovers over will be colored accordingly.  Maybe incorporate opacity? */
/* TABLE END */