:root {
  --inline-space: 1ch;
  --block-space: 1rem;

  --f-text: 18px;
  --f-code: 16px;

  --lch-primary: 40% 0.2161 313;
  --lch-secondary: 50% 0.1 135;

  --color-primary: oklch(var(--lch-primary));
  --color-secondary: oklch(var(--lch-secondary));

  --color-text: oklch(from var(--color-primary) 0 c h);
  --color-bg: oklch(from var(--color-primary) 98% 0 h);

  --color-link: var(--color-secondary);
  --color-link-visited: var(--color-primary);

  --color-primary-surface: oklch(var(--lch-primary) / 25%);
  --color-secondary-surface: oklch(var(--lch-secondary) / 25%);

  --color-quote-bg: var(--color-secondary-surface);

  --color-border: oklch(from var(--color-text) l c h / 50%);
}

html {
  font-family: "Zilla Slab";
  font-size: var(--f-text);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

pre, code {
  font-family: monospace;
  font-size: var(--f-code);
}

a {
  text-decoration-line: none;
  &:hover {
    text-decoration-line: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
  }
}


nav {
  padding: var(--block-space) calc(var(--inline-space) * 2);
  display: flex;
  gap: calc(var(--inline-space) * 3);

  a {
    color: var(--color-text);
    text-transform: lowercase;
    font-variant: small-caps;
    font-weight: 600;
    font-size: calc(var(--f-text) * 1.75);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
  }
}

main {
  flex: 1 0 auto;
  padding-inline: calc(var(--inline-space) * 2);
  max-inline-size: 100ch;
}


footer {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
  padding: calc(var(--block-space) * 1.5) var(--inline-space);
  text-transform: lowercase;

  .footer-links {
    display: flex;
    gap: calc(var(--inline-space) * 2);
  }
}