:root {
  --grand-bg: #080808;
  --grand-surface: #171717;
  --grand-surface-2: #202020;
  --grand-border: rgb(255 255 255 / 8%);
  --grand-text: #e6e6e6;
  --grand-muted: #8a8a8a;
  --grand-yellow: #ffc300;
  --grand-yellow-text: #423300;
  --grand-red: #ed4d40;
}

html,
body {
  background: var(--grand-bg) !important;
  color: var(--grand-text) !important;
  font-family: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a,
.mw-parser-output a.extiw,
.mw-parser-output a.external {
  color: var(--grand-yellow);
}

a:hover {
  color: #ffe07a;
}

.mw-body,
.vector-body,
.vector-page-titlebar,
.vector-page-toolbar,
.vector-header-container,
.vector-sticky-header {
  background: transparent !important;
  color: var(--grand-text) !important;
}

.mw-page-container {
  background: var(--grand-bg) !important;
}

.vector-main-menu,
.vector-toc,
.vector-page-tools,
.vector-toc-landmark,
.vector-column-start,
.vector-column-end {
  background: var(--grand-bg) !important;
}

.vector-main-menu,
.vector-toc,
.vector-page-tools {
  border-color: var(--grand-border) !important;
}

.mw-body {
  border: 1px solid var(--grand-border) !important;
  border-radius: 8px;
  background: var(--grand-surface) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.mw-logo-wordmark {
  filter: invert(1);
}

.mw-logo-tagline,
.vector-menu-heading,
.vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link,
.mw-footer li,
.catlinks {
  color: var(--grand-muted) !important;
}

.mw-first-heading,
.mw-heading1 h1,
.mw-heading2 h2,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--grand-text) !important;
  letter-spacing: 0;
}

.mw-first-heading {
  font-weight: 800;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited,
.vector-page-tools .selected a,
.vector-page-tools .selected a:visited {
  color: var(--grand-yellow) !important;
}

.vector-search-box-input,
.cdx-text-input__input,
input,
textarea,
select {
  border-color: var(--grand-border) !important;
  border-radius: 6px !important;
  background: var(--grand-surface-2) !important;
  color: var(--grand-text) !important;
}

.cdx-button,
.mw-ui-button,
button {
  border-color: var(--grand-border) !important;
  border-radius: 6px !important;
  background: var(--grand-surface-2) !important;
  color: var(--grand-text) !important;
}

.cdx-button--action-progressive,
.mw-ui-progressive {
  border-color: var(--grand-yellow) !important;
  background: var(--grand-yellow) !important;
  color: var(--grand-yellow-text) !important;
}

.mw-parser-output table,
.wikitable {
  border-color: var(--grand-border) !important;
  background: var(--grand-surface) !important;
  color: var(--grand-text) !important;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
  background: var(--grand-surface-2) !important;
  color: var(--grand-text) !important;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
  border-color: var(--grand-border) !important;
}

pre,
code,
.mw-code {
  border: 1px solid var(--grand-border) !important;
  border-radius: 6px;
  background: #101010 !important;
  color: #f5f5f5 !important;
}

.toc,
.mw-parser-output .toc,
.catlinks,
.thumbinner,
.ambox,
.infobox {
  border-color: var(--grand-border) !important;
  border-radius: 8px;
  background: var(--grand-surface-2) !important;
  color: var(--grand-text) !important;
}

.thumbcaption,
.mw-parser-output .template-documentation,
.mw-parser-output .plainlinks,
.mw-parser-output .mw-empty-elt {
  color: var(--grand-muted) !important;
}

.mw-parser-output hr {
  border-color: var(--grand-border);
}

.mw-parser-output img {
  border-radius: 6px;
}

.mw-parser-output .error,
.errorbox {
  color: var(--grand-red) !important;
}

.mw-parser-output a.new {
  color: #ff7474 !important;
}

.mw-footer {
  color: var(--grand-muted) !important;
}

.mw-footer a {
  color: var(--grand-yellow) !important;
}

.vector-sticky-header {
  border-bottom: 1px solid var(--grand-border) !important;
  backdrop-filter: blur(12px);
}

