@import url("../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next.css");

:root {
  --s: 0.8;
  --l: 1.4;
  --xl: 1.96;
  --xxl: 2.74;
  --3xl: 3.8;

  --font-size: 1.1rem;
  --font-size-s: calc(var(--font-size) * var(--s));
  --font-size-l: calc(var(--font-size) * var(--l));
  --font-size-xl: calc(var(--font-size) * var(--xl));
  --font-size-xxl: calc(var(--font-size) * var(--xxl));
  --font-size-3xl: calc(var(--font-size) * var(--3xl));

  --spacing: calc(0.75 * var(--font-size));
  --spacing-l: calc(var(--spacing) * var(--l));
  --spacing-xl: calc(var(--spacing) * var(--xl));
  --spacing-xxl: calc(var(--spacing) * var(--xxl));
  --spacing-3xl: calc(var(--spacing) * var(--3xl));

  @media (prefers-color-scheme: light) {
    --bg-color: oklch(0.98 0 150);
    --bg-color-highlight: oklch(0.9 0.02 150);
    --fg-color: oklch(0.4 0.02 150);
    --accent-color: oklch(0.6 0.1 150);
  }

  @media (prefers-color-scheme: dark) {
    --bg-color: oklch(0.3 0.001 60);
    --bg-color-highlight: oklch(0.38 0.04 60);
    --fg-color: oklch(0.88 0.02 60);
    --accent-color: oklch(0.68 0.1 60);
  }
}

html {
  background-color: var(--bg-color);
  color: var(--fg-color);
  font-size: var(--font-size);
  height: 100vh;

  scroll-behavior: smooth;
  @media (prefers-reduced-motion) {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 650px;
  margin: 0 auto;
  padding: var(--spacing-l) var(--spacing-xxl);

  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-weight: 400;

  a[href="#main"] {
    position: absolute;
    top: -100%;
    left: -100;
    margin: var(--spacing);

    &:focus {
      top: 0;
      left: 0;
    }
  }

  p {
    margin-bottom: var(--spacing);
  }

  h1,
  h2,
  h3 {
    margin-bottom: var(--spacing);
    margin-top: var(--spacing-xl);
    font-weight: bold;
    line-height: 1.2;
  }

  h1 {
    font-size: var(--font-size-xl);
  }
  h2 {
    font-size: var(--font-size-l);
  }
  h3 {
    font-size: var(--font-size);
  }

  a,
  a:visited {
    color: var(--accent-color);

    &:hover {
      text-decoration-thickness: 2px;
    }
  }

  p > a,
  p > a:visited {
    color: var(--accent-color);
  }

  > header {
    @media (max-width: 650px) {
      text-align: center;
      padding: var(--spacing-xl) 0;
    }

    @media (min-width: 650px) {
      padding: 2.5rem 0;
    }

    .website-title {
      font-size: var(--font-size-xl);
      font-weight: bold;
    }
  }

  > footer {
    margin: auto 0 0 0;
    padding: var(--spacing-3xl) 0 0 0;

    hr {
      width: 10%;
      margin: var(--spacing-3xl) auto;
      color: var(--accent-color);
    }

    text-align: center;
    font-size: var(--font-size-s);
  }
}