/* Dark mode overrides */
:root {
  --dl-bg: #05060a;
  --dl-bg-alt: #0b0f1a;
  --dl-panel: rgba(7, 9, 14, 0.92);
  --dl-card: rgba(10, 12, 20, 0.9);
  --dl-border: rgba(212, 175, 55, 0.4);
  --dl-text: #f8f4e6;
  --dl-muted: rgba(248, 244, 230, 0.72);
  --dl-gold: #d4af37;
  --dl-gold-bright: #f4d060;
}

body {
  background-color: var(--dl-bg);
  background-image:
    url("images/overlay.png"),
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.25), transparent 45%),
    linear-gradient(120deg, #05060a 0%, #0f1726 55%, #050509 100%);
  color: var(--dl-muted);
}

body, input, select, textarea {
  color: var(--dl-muted);
}

strong,
h1, h2, h3, h4, h5, h6 {
  color: var(--dl-text);
}

a {
  color: var(--dl-gold);
  border-bottom-color: rgba(212, 175, 55, 0.35);
}

a:hover {
  color: var(--dl-gold-bright);
}

#wrapper {
  background: var(--dl-panel);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.65);
  border-radius: 2rem;
}

#header.alt {
  background: transparent;
}

#nav {
  background: rgba(5, 6, 10, 0.95);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
}

#nav ul li a {
  border-bottom: none;
  color: var(--dl-muted);
}

#nav ul li a:hover,
#nav ul li a.active {
  color: var(--dl-text);
  background: rgba(212, 175, 55, 0.18);
  box-shadow: inset 0 0 0 1px var(--dl-border);
}

.main {
  background: var(--dl-card);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.main.special {
  background: rgba(8, 10, 16, 0.9);
}

.spotlight .content {
  background: rgba(3, 5, 10, 0.7);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}

.features li {
  background: rgba(5, 7, 12, 0.8);
  border-radius: 1rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

.features li .icon {
  color: var(--dl-gold);
}

.statistics li {
  background: rgba(4, 5, 9, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.statistics li strong,
.statistics li .icon {
  color: var(--dl-gold);
}

.button {
  background-color: rgba(212, 175, 55, 0.12);
  border-color: var(--dl-border);
  color: var(--dl-text);
}

.button:hover {
  background-color: rgba(212, 175, 55, 0.2);
}

.button.primary {
  background-color: var(--dl-gold);
  color: #0b0d14;
  border: none;
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.45);
}

.button.primary:hover {
  background-color: var(--dl-gold-bright);
}

.icon.major,
.icon.solid.major {
  border-color: var(--dl-border);
  color: var(--dl-gold);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

blockquote,
hr,
.table-wrapper table tbody tr {
  border-color: rgba(255, 255, 255, 0.08);
}

.table-wrapper table tbody tr:nth-child(2n + 1) {
  background-color: rgba(255, 255, 255, 0.02);
}

#footer {
  background: rgba(4, 5, 9, 0.85);
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#footer .icons li a {
  border-color: var(--dl-border);
  color: var(--dl-gold);
}

#footer .icons li a:hover {
  background: rgba(212, 175, 55, 0.2);
}