body {
  --flame: 241, 97, 81;
  --park-green: 32, 84, 62;
  --tile: 146, 88, 64;
  --sapphire: 64, 81, 163;
  --lake: 126, 196, 226;
  --mulberry: 173, 43, 90;
  --lavender: 205, 184, 209;
  --midnight: 17, 26, 42;
  --granite: 234, 235, 231;
  --sand: 234, 220, 201;
  --angle: 30deg;
  --dist: 60%;

  --bg: linear-gradient(
    30deg,
    var(--bg-color) 0% 40%,
    var(--bg-accent) 40% 100%
  );
  --midphire: color-mix(
    in oklab,
    rgb(var(--midnight)) 76%,
    rgb(var(--sapphire))
  );
  scroll-margin: 2rem;
}
body:not(.dark) {
  --fg-rgb: var(--midnight);
  --fg-color: var(--midphire);
  --fg-accent: rgb(var(--midnight));
  --bg-rgb: var(--granite);
  --bg-color: rgb(var(--bg-rgb));
  --bg-accent: rgb(var(--lavender));
}
body.dark {
  --fg-rgb: var(--granite);
  --fg-color: rgb(var(--fg-rgb));
  --fg-accent: rgb(var(--lavender));
  --bg-rgb: var(--midnight);
  --bg-color: var(--midphire);
  --bg-accent: rgb(var(--midnight));
}

@font-face {
  font-family: "flecha-m";
  src:
    url("/static/fonts/FlechaM-Regular.woff") format("woff"),
    url("/static/fonts/FlechaM-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "signifier";
  src: url("/static/fonts/signifier-regular.woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "styrene";
  src:
    url("/static/fonts/StyreneB-Regular-Web.woff") format("woff"),
    url("/static/fonts/StyreneB-Regular-Web.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  color: var(--fg-color);
  font-family: "styrene";
}
header,
body {
  background-image: var(--bg);
  background-attachment: fixed;
}

h1,
h1 a,
h1 *,
h2,
h2 * {
  font-family: "flecha-m";
  color: var(--fg-accent);
}

a,
h3,
h4,
h5,
h6,
dt,
p {
  font-family: "styrene";
  color: var(--fg-color);
}

.link-lines {
  /*color: inherit;*/
  text-decoration: none;
  background:
    linear-gradient(
      to right,
      color-mix(in oklab, currentcolor 30%, transparent),
      color-mix(in oklab, currentcolor 30%, transparent)
    ),
    linear-gradient(to right, currentcolor, var(--fg-accent));
  background-size:
    100% 0.1rem,
    0 0.1rem;
  background-position:
    100% 100%,
    0 100%;
  background-repeat: no-repeat;
  transition: background-size 300ms;
}

.link-lines:hover,
.link-lines:focus {
  background-size:
    0 0.1rem,
    100% 0.1rem;
}