:root {
  --wolle-ink: #20242b;
  --wolle-muted: #667085;
  --wolle-accent: #5b4bdb;
  --wolle-soft: #f4f2ff;
  --wolle-border: #dedbe9;
}

body {
  color: var(--wolle-ink);
}

.navbar-default {
  background-color: #302a57;
  border-color: #302a57;
}

.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
  border-right-color: var(--wolle-accent);
  color: var(--wolle-accent);
}

h1,
h2,
h3 {
  scroll-margin-top: 72px;
}

h2 {
  border-bottom: 1px solid var(--wolle-border);
  padding-bottom: 0.3em;
}

code {
  color: #4d3bc4;
  background: var(--wolle-soft);
}

table:not(.highlighttable) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

blockquote {
  border-left-color: var(--wolle-accent);
  background: var(--wolle-soft);
  color: var(--wolle-ink);
  padding: 0.8em 1em;
}

.formula {
  background: #f8f9fb;
  border: 1px solid var(--wolle-border);
  border-radius: 6px;
  padding: 0.8em 1em;
}

@media (max-width: 768px) {
  table:not(.highlighttable) {
    font-size: 0.9em;
  }
}