/* wikitable by @limegreen on neocities. a link is appreciated! */
/* Full Dark Mode + Paragraph Fix */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700');

/* ===== Global Colors ===== */
:root {
  --backgroundcolor: #0f1113;
  --textcolor: #e3e3e3;
  --header: #16181a;
  --main: #181a1b;
  --footer: #16181a;
  --borders: #2f3337;

  --link: #6ea8ff;
  --linkhover: #9fc1ff;

  --topbar-height: 111;

  --breadcrumb: #9aa0a6;
  --h1: #ffffff;
  --h2: #ffffff;
  --h3: #ffffff;
  --headerunderline: #2f3337;

  --quotebackground: #1e2124;
  --quotetext: #d6d6d6;
  --boxbg: #1e2124;
  --showcontentborder: #2f3337;

  --seriesofbg: #1e2124;
  --seriesoftext: #e0e0e0;

  --infoboxbg: #1e2124;
  --centertext: #2a2e32;
  --boldtext: #ffffff;
  --infotext: #e0e0e0;
}

/* ===== Base ===== */
body {
  background-color: var(--backgroundcolor);
  font-family: Atkinson Hyperlegible, sans-serif;
  font-size: 15.5px;
  margin: 0;
  color: var(--textcolor);
}

/* ===== Page Wrapper ===== */
.wrapper {
  min-height: 100vh;
  width: 90%;
  max-width: 1400px;
  margin: calc(var(--topbar-height) * 1px) auto 20px auto;
  background: transparent;
}

/* ===== Paragraphs ===== */
p {
  margin: 0 0 1em 0;
  line-height: 1.6;
}

.description,
.content,
article {
  white-space: pre-line;
  line-height: 1.6;
}

/* ===== Header ===== */
header {
  height: 100px;
  background: var(--header);
  border: 1px solid var(--borders);
  border-bottom: none;
}

/* ===== Main Content ===== */
main {
  padding: 18px 24px;
  min-height: 100vh;
  clear: left;
  background: var(--main);
  border-left: 1px solid var(--borders);
  border-right: 1px solid var(--borders);
}

main::after {
  content: "";
  display: block;
  clear: both;
}

/* ===== Footer ===== */
footer {
  background: var(--footer);
  padding: 35px;
  border: 1px solid var(--borders);
  border-top: none;
  text-align: center;
  font-size: 0.85rem;
  color: #9aa0a6;
}

/* ===== Links ===== */
a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--linkhover);
  text-decoration: underline;
}

/* ===== Breadcrumb ===== */
.breadcrumb {
  color: var(--breadcrumb);
  font-size: 0.85rem;
}

/* ===== Headers ===== */
h1, h2, h3 {
  overflow: hidden;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--headerunderline);
  color: var(--h1);
  margin-top: 1.2em;
}

h1 {
  margin-top: 0;
}

h2 {
  font-size: 19pt;
}

h3 {
  font-size: 16pt;
}

/* ===== Images ===== */
main img {
  max-width: 100%;
}

/* ===== Inputs ===== */
input[type="search"],
input[type="text"] {
  width: 100%;
  padding: 10px;
  background: #1f2225;
  color: #e3e3e3;
  border: 1px solid var(--borders);
  border-radius: 3px;
  font-family: inherit;
}

input::placeholder {
  color: #9aa0a6;
}

/* ===== Table of Contents ===== */
.contents {
  background-color: var(--boxbg);
  width: 18%;
  padding: 7px;
  border: 1px solid var(--showcontentborder);
}

/* ===== Quotes ===== */
.quotebox {
  width: 30%;
  font-style: italic;
  padding: 13px;
  border-left: 3px solid var(--borders);
  background-color: var(--quotebackground);
  color: var(--quotetext);
}

/* ===== Reveal ===== */
.revealsummary {
  text-align: center;
  background-color: var(--seriesofbg);
  padding: 10px;
  font-weight: bold;
  border: 1px solid var(--showcontentborder);
}

.reveal {
  text-align: center;
  background-color: var(--seriesofbg);
  padding: 5px;
  width: 50%;
  border: 1px solid var(--showcontentborder);
  color: var(--seriesoftext);
}

/* ===== Entity Rows ===== */
.entity,
.entity-list li,
button {
  background: #202326;
  border: 1px solid var(--borders);
  color: #e6e6e6;
  padding: 12px;
  margin-bottom: 8px;
  font-family: monospace;
}

/* ===== Infobox ===== */
.infotable {
  float: right;
  margin-left: 15px;
  background: var(--infoboxbg);
  border: 1px solid var(--borders);
  width: 22%;
  font-size: 14px;
  color: var(--infotext);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .infotable {
    width: 100%;
    margin-bottom: 20px;
  }

  .wrapper {
    width: 96%;
  }

  .reveal {
    width: 90%;
  }
}