@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800&display=swap");

/* Contra palette: near-black brown, gold, bright yellow */

[data-md-color-scheme="slate"] {
  --contra-bg: #160e06;
  --contra-surface: #22170b;
  --contra-raised: #2f1f0e;
  --contra-border: #5e4416;
  --contra-frame: #7d6116;
  --contra-gold: #e0b349;
  --contra-yellow: #f5c518;
  --contra-bright: #fff04a;
  --contra-orange: #e8901c;
  --contra-text: #efe0bd;
  --contra-muted: #b49c72;

  --md-hue: 35;
  --md-default-bg-color: var(--contra-bg);
  --md-default-fg-color: var(--contra-text);
  --md-default-fg-color--light: var(--contra-muted);
  --md-default-fg-color--lighter: #9a8462;
  --md-default-fg-color--lightest: #3d2c16;
  --md-primary-fg-color: #1c1208;
  --md-primary-fg-color--light: #2f1f0e;
  --md-primary-fg-color--dark: #0f0904;
  --md-primary-bg-color: var(--contra-yellow);
  --md-primary-bg-color--light: var(--contra-gold);
  --md-accent-fg-color: var(--contra-bright);
  --md-accent-fg-color--transparent: rgba(245, 197, 24, 0.12);
  --md-typeset-color: var(--contra-text);
  --md-typeset-a-color: var(--contra-gold);
  --md-code-bg-color: #1e1409;
  --md-code-fg-color: #f3e3c0;
  --md-code-hl-color: rgba(245, 197, 24, 0.15);
  --md-typeset-table-color: rgba(224, 179, 73, 0.18);
  --md-typeset-table-color--light: rgba(224, 179, 73, 0.05);
  --md-footer-bg-color: #1c1208;
  --md-footer-bg-color--dark: #0f0904;
  --md-footer-fg-color: var(--contra-gold);
  --md-footer-fg-color--light: var(--contra-muted);
  --md-admonition-bg-color: var(--contra-surface);
  --md-shadow-z1: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5);
}

/* Warm glow, gold dust and a faint honeycomb behind the page */

body {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 220, 120, 0.55), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(255, 220, 120, 0.45), transparent),
    radial-gradient(2px 2px at 64% 72%, rgba(255, 200, 90, 0.35), transparent),
    radial-gradient(1px 1px at 32% 84%, rgba(255, 220, 120, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 90% 55%, rgba(255, 210, 100, 0.4), transparent),
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(128, 82, 24, 0.35), transparent),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(110, 66, 18, 0.3), transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96'%3E%3Cpath d='M28 0L56 16L56 48L28 64L0 48L0 16Z M28 64L28 96' fill='none' stroke='rgba(224,179,73,0.07)' stroke-width='1.2'/%3E%3C/svg%3E"),
    var(--contra-bg);
  background-attachment: fixed;
}

/* Header and tabs carry the logo's frame line */

.md-header {
  background: linear-gradient(180deg, #2a1b0a 0%, #160e06 100%);
  border-bottom: 1px solid var(--contra-frame);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.md-header__topic:first-child,
.md-header__title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--contra-yellow);
  text-shadow: 0 0 1px #000, 1px 1px 0 #000, 0 0 8px rgba(245, 197, 24, 0.35);
}

.md-header__button.md-logo img {
  height: 1.6rem;
  filter: drop-shadow(0 0 4px rgba(245, 197, 24, 0.45));
}

.md-search__form {
  background-color: rgba(224, 179, 73, 0.1);
  border: 1px solid var(--contra-border);
}

/* Content card framed like the splash screen */

.md-main__inner {
  margin-top: 1.2rem;
}

.md-content__inner {
  background: rgba(34, 23, 11, 0.82);
  border: 1px solid var(--contra-border);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 24px rgba(0, 0, 0, 0.5);
  padding: 0.4rem 1.6rem 1.6rem;
  margin-bottom: 2rem;
}

/* Page titles in the logo's yellow with a black outline; Orbitron stays on titles only */

.md-typeset h1 {
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.04em;
  font-weight: 800;
  color: var(--contra-yellow);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 10px rgba(245, 197, 24, 0.3);
}

/* Later h1s split long pages into parts */

.md-typeset h1 ~ h1 {
  font-size: 1.65em;
  margin-top: 2.4em;
  padding-top: 0.9em;
  border-top: 2px solid var(--contra-frame);
}

.md-typeset h2 {
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--contra-yellow);
  margin-top: 2.2em;
  border-bottom: 1px solid var(--contra-border);
  padding-bottom: 0.25em;
}

.md-typeset h3 {
  font-size: 1.1em;
  font-weight: 700;
  color: #f8ecd0;
  margin-top: 1.8em;
  padding-left: 0.6em;
  border-left: 3px solid var(--contra-orange);
}

.md-typeset h4 {
  color: #f8ecd0;
  margin-top: 1.4em;
}

/* Links carry a thin underline so they stand apart from cream text */

.md-typeset a:not(.headerlink):not(.md-button) {
  text-decoration: underline;
  text-decoration-color: rgba(224, 179, 73, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.md-typeset a:hover {
  color: var(--contra-bright);
}

.md-typeset a:not(.headerlink):not(.md-button):hover {
  text-decoration-color: var(--contra-bright);
}

.md-typeset code {
  border: 1px solid rgba(224, 179, 73, 0.15);
}

/* Inline code copies on click (copy-inline.js); a Copy tag shows on hover */

.md-typeset :not(pre):not(a) > code {
  position: relative;
  cursor: copy;
  transition: border-color 0.15s, background-color 0.15s;
}

.md-typeset :not(pre):not(a) > code:hover {
  border-color: rgba(245, 197, 24, 0.55);
}

.md-typeset :not(pre):not(a) > code:hover::after,
.md-typeset code.contra-copied::after {
  content: "Copy";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -0.3em);
  padding: 0.1em 0.5em;
  font-family: "Exo 2", sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  white-space: nowrap;
  color: #160e06;
  background: var(--contra-gold);
  border-radius: 0.2em;
  pointer-events: none;
  z-index: 1;
}

.md-typeset code.contra-copied {
  border-color: var(--contra-yellow);
  background-color: rgba(245, 197, 24, 0.18);
}

.md-typeset code.contra-copied::after {
  content: "Copied";
  background: var(--contra-yellow);
}

.md-typeset table:not([class]) {
  border: 1px solid var(--contra-border);
}

.md-typeset table:not([class]) th {
  background-color: var(--contra-raised);
  color: var(--contra-yellow);
}

/* Sidebar */

.md-nav__item--section > .md-nav__link {
  font-family: "Orbitron", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contra-gold);
}

.md-nav__link--active,
.md-nav__link:hover {
  color: var(--contra-bright) !important;
}

.md-footer {
  border-top: 1px solid var(--contra-frame);
}

/* Body text */

.md-typeset {
  font-size: 0.78rem;
  line-height: 1.75;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  margin-block: 0.9em;
}

.md-typeset li {
  margin-bottom: 0.35em;
}

.md-typeset strong {
  color: #f8ecd0;
}

/* Key entries: the key on its own line, the description under it */

.md-typeset ul > li.contra-key {
  list-style: none;
  margin-left: -1.25em;
  padding: 0.45em 0.8em 0.5em;
  background: rgba(224, 179, 73, 0.035);
  border-left: 2px solid var(--contra-border);
  border-radius: 0 0.2rem 0.2rem 0;
  transition: border-color 0.15s, background-color 0.15s;
}

.md-typeset ul > li.contra-key:hover {
  border-left-color: var(--contra-yellow);
  background: rgba(224, 179, 73, 0.07);
}

.md-typeset li.contra-key > code:first-child,
.md-typeset li.contra-key > p:first-child > code:first-child {
  color: var(--contra-bright);
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.35);
}

.md-typeset .contra-desc {
  display: block;
  margin-top: 0.2em;
  color: var(--contra-text);
}

.md-typeset li.contra-key ul,
.md-typeset li.contra-key ol {
  margin-block: 0.4em 0.1em;
}

.md-typeset li.contra-key li.contra-key {
  margin-left: 0;
  background: transparent;
  padding: 0.15em 0.6em;
}

/* Heading tags */

.md-typeset .contra-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
  padding: 0.15em 0.55em 0.1em;
  font-family: "Exo 2", sans-serif;
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
  color: #160e06;
  background: var(--contra-gold);
  border-radius: 0.2rem;
}

.md-typeset .contra-badge--exp {
  background: var(--contra-orange);
}

/* Notes */

.md-typeset .admonition.note,
.md-typeset details.note {
  border: 1px solid var(--contra-border);
  border-left: 3px solid var(--contra-gold);
  background: rgba(224, 179, 73, 0.05);
  box-shadow: none;
  font-size: 0.74rem;
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background: rgba(224, 179, 73, 0.12);
  color: var(--contra-gold);
  font-weight: 700;
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--contra-gold);
}

/* Code blocks */

.md-typeset pre > code {
  border: 1px solid var(--contra-border);
  border-radius: 0.2rem;
}

.md-typeset pre {
  margin-block: 0.8em 1.2em;
}

[data-md-color-scheme="slate"] {
  --md-code-hl-name-color: #f5c518;
  --md-code-hl-string-color: #efe0bd;
  --md-code-hl-comment-color: #a08a66;
  --md-code-hl-operator-color: #e8901c;
  --md-code-hl-punctuation-color: #b49c72;
  --md-code-hl-keyword-color: #f0a040;
  --md-code-hl-number-color: #ffd98a;
  --md-code-hl-constant-color: #ffb347;
  --md-code-hl-special-color: #ff9a6a;
  --md-code-hl-function-color: #f5c518;
  --md-code-hl-variable-color: #f5c518;
  --md-code-hl-generic-color: #b49c72;
}

/* Tables */

.md-typeset table:not([class]) {
  font-size: 0.72rem;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  padding: 0.6em 0.9em;
  vertical-align: top;
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background-color: rgba(224, 179, 73, 0.035);
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(224, 179, 73, 0.08);
}

/* Pictures */

.md-typeset img {
  border: 1px solid var(--contra-border);
  border-radius: 0.2rem;
}

.md-typeset hr {
  border-bottom: 1px solid var(--contra-border);
}

/* Nested value lists stay on one line per value */

.md-typeset li.contra-key li.contra-key .contra-desc {
  display: inline;
}

.md-typeset li.contra-key li.contra-key .contra-desc::before {
  content: " \2014  ";
  color: var(--contra-muted);
}

/* Phones: less card padding, more room for text */

@media screen and (max-width: 44.984375em) {
  .md-content__inner {
    padding: 0.2rem 0.8rem 1rem;
    border-left: none;
    border-right: none;
  }
}

/* Wide layout: Material caps the page at 61rem */

.md-grid {
  max-width: 96rem;
}

/* Narrower sidebars leave more room for the page */

@media screen and (min-width: 76.25em) {
  .md-sidebar {
    width: 10rem;
  }
}

@media screen and (min-width: 60em) {
  .md-sidebar--secondary {
    width: 10rem;
  }
}