:root > * {
  --md-primary-fg-color: hsl(200, 18%, 16%);
  --md-primary-fg-color--light: hsl(200, 12%, 26%);
  --md-primary-fg-color--dark: hsl(200, 22%, 10%);
  --md-accent-fg-color: hsl(36, 100%, 50%);
  --md-default-bg-color: hsl(200, 15%, 12%);
  --md-default-fg-color: hsl(0, 0%, 88%);
  --md-typeset-a-color: var(--md-accent-fg-color);
  --md-code-bg-color: hsla(200, 18%, 18%, 1);
  --md-footer-bg-color: hsl(200, 18%, 10%);
}

.md-main::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("../assets/fractal.svg") center/cover no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}

.md-typeset h1 {
  border-bottom: 2px solid var(--md-accent-fg-color);
  padding-bottom: 0.3em;
  font-weight: 700;
}

.md-typeset h2 { margin-top: 2em; font-weight: 600; }
.md-typeset h3 { color: var(--md-accent-fg-color); opacity: 0.8; font-weight: 600; }
.md-typeset h4 { font-weight: 600; font-style: italic; }

.md-typeset a {
  transition: color 0.15s ease;
}
.md-typeset a:hover {
  color: var(--md-accent-fg-color) !important;
}

.md-typeset .admonition,
.md-typeset details {
  border-left-color: var(--md-accent-fg-color);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--md-default-bg-color); }
::-webkit-scrollbar-thumb { background: var(--md-primary-fg-color--light); border-radius: 4px; }

.md-typeset .grid.cards > ul > li {
  transition: all 0.2s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  transform: translateY(-2px);
}