html {
  --color-bg-dim: #1e2326;
  --color-bg-neutral-0: #272e33;
  --color-bg-neutral-1: #2e383c;
  --color-bg-neutral-2: #374145;
  --color-bg-neutral-3: #414b50;
  --color-bg-neutral-4: #495156;
  --color-bg-neutral-5: #4f5b58;
  --color-bg-red: #493b40;
  --color-bg-yellow: #45443c;
  --color-bg-green: #3c4841;
  --color-bg-blue: #384b55;
  --color-bg-purple: #463f48;
  --color-bg-visual: #4c3743;
  --color-fg: #d3c6aa;
  --color-fg-red: #e67e80;
  --color-fg-yellow: #dbbc7f;
  --color-fg-green: #a7c080;
  --color-fg-blue: #7fbbb3;
  --color-fg-purple: #d699b6;
  --color-fg-aqua: #83c092;
  --color-fg-orange: #e69875;
  --color-grey0: #7a8478;
  --color-grey1: #859289;
  --color-grey2: #9da9a0;
  --color-success: #a7c080;
  --color-warning: #d3c6aa;
  --color-danger: #9da9a0;
}

body {
  background: var(--color-bg-neutral-0);
  color: var(--color-fg);
  margin: 2em;
}

a {
  color: var(--color-fg-purple);
}
a:visited {
  color: var(--color-fg-purple);
}
a:focus {
  color: var(--color-fg-yellow);
}
a:hover {
  color: var(--color-fg-orange);
}

strong {
  color: var(--color-fg-yellow);
}
h1 {
  color: var(--color-fg-red);
}
h2 {
  color: var(--color-fg-green);
}
h3 {
  color: var(--color-fg-blue);
}
h4 {
  color: var(--color-fg-aqua);
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inconsolata-normal {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}