/* taken from https://github.com/helix-editor/helix/blob/master/runtime/themes/snazzy.toml */
:root {
  --black: #21222c;
  --red: #ff5c57;
  --green: #5af78e;
  --yellow: #f0fb8c;
  --blue: #57c7ff;
  --magenta: #ff6ac1;
  --purple: #bd93f9;
  --cyan: #9aedfe;
  --grey: #a39e9b;
  --carnation: #f99fc6;
  --coral: #f97c7c;
  --lilac: #c9c5fb;
  --olive: #b6d37c;
  --opal: #b1d7c7;
  --sand: #ffab6f;
  --background: #282a36;
  --foreground: #eff0eb;
  --selection-bg: #81aec6;
  --highlight: #4d4f66;
  --white: #ededec;
}


@font-face {
  font-family: Atkinson;
  src:
    local("Atkinson Hyperlegible"),
    url("/fonts/Atkinson/AtkinsonHyperlegible-Regular.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Atkinson;
  src:
    local("Atkinson Hyperlegible"),
    url("/fonts/Atkinson/AtkinsonHyperlegible-Italic.woff2") format('woff2');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: Atkinson;
  src:
    local("Atkinson Hyperlegible"),
    url("/fonts/Atkinson/AtkinsonHyperlegible-Bold.woff2") format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: Atkinson;
  src:
    local("Atkinson Hyperlegible"),
    url("/fonts/Atkinson/AtkinsonHyperlegible-BoldItalic.woff2") format('woff2');
  font-weight: bold;
  font-style: italic;
}

body {
  font-size: medium;
  font-family: Atkinson;
  max-width: 75%;
  margin: auto;
  padding: 1rem;
  background: var(--background);
  color: var(--foreground);
}

::selection {
  background: var(--highlight);
  color: var(--white);
}

.me {
  color: var(--yellow);
}

:link {
  color: var(--cyan);
}

:visited {
  color: var(--magenta);
}

.disclaimer {
  font-size: small;
}

footer {
  border-top: 2px solid var(--grey);
  color: var(--grey);
  font-style: italic;
}

nav {
  color: var(--lilac);
  border-bottom: 2px solid var(--grey);
}

#webring {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#webring>li {
  display: inline-block;
}

#webring>li.me::before {
  content: "↼";
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

#webring>li.me::after {
  content: "⇀";
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

.crumbs ol {
  list-style-type: none;
  padding-left: 0;
}

.crumb {
  display: inline-block;
}

.crumb a::after {
  color: var(--coral);
  content: "❯";
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}