:root {
  --wk-bg: #111;
  --wk-panel: rgba(255, 255, 255, 0.02);
  --wk-ink: #f1f1f1;
  --wk-muted: #b9bcc4;
  --wk-line: #333741;
  --wk-accent: #ff6a57;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--wk-bg) !important;
  color: var(--wk-ink) !important;
  position: relative;
  overflow-x: hidden;
}

#header,
.header {
  padding: 22px 24px;
  background: rgba(11, 11, 14, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(8px);
}

section,
.section,
.panel {
  border: 1px solid var(--wk-line) !important;
  background: var(--wk-panel) !important;
}

h2,
.section-title h2,
.hero h2 {
  color: var(--wk-accent) !important;
}

p,
.section-title p {
  color: var(--wk-muted);
}

.about .content h3 {
  color: var(--wk-ink);
}

.faq {
  --heading-color: var(--wk-ink);
}

.hero p,
.dark-background p,
.footer p {
  color: #fff;
}

.navmenu a,
.header-social-links a,
.sitename {
  color: #fff;
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
  color: #7cc576;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}