@layer base, per-site;

@layer base {
  :root {
    /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
    --accent-color-light: #cd9508;
    /* A modified version of accent-color-light, which works nicely as a link color
     * and with the dark theme */
    --accent-color-dark: #FFC900;
  }

  body {
    font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;

    text-align: left;
    line-height: 1.4;

    /* Use dark grey instead of black to be lighter on the eyes. But also a grey
     * which still works with the link color nicely. */
    --bg-color: #ffffff;
    --fg-color: #2b2b2b;
    --accent-color: var(--accent-color-light);
    background-color: var(--bg-color);
    color: var(--fg-color);

    @media (prefers-color-scheme: dark) {
      /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
      /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
      --bg-color: #1b1b1b;
      --fg-color: #ebebeb;
      --accent-color: var(--accent-color-dark);
    }
  }

  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 5px;
  }

  footer {
    margin-top: 4rem;
  }

  img {
    width: 100%;
  }

  a:link, a:visited {
    color: var(--accent-color);
    padding-inline: 0.1ch;
    &:hover:not(:has(img)) {
      background-color: var(--accent-color);
      color: white;
      text-decoration: none;
    }
  }

  u {
    text-decoration-color: var(--accent-color);
  }

  ul li::marker {
    color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
    font-size: larger;
  }

  .title {
    text-align: center;
  }

  .hero-img {
    max-width: 600px;
    display: block;
    margin: 0 auto;
  }

  p.bigger {
    font-size: 1.2rem;
  }

  section {
    margin-top: 3rem;
  }

  details {
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    background-color: color-mix(in hsl, var(--accent-color) 20%, var(--bg-color) 80%);

    & > * {
      padding: 0.5rem 1ch;
    }

    & > summary {
      cursor: pointer;
      user-select: none;
    }

    &[open] > summary {
      border-bottom: 1px solid var(--accent-color);
      margin-left: 0;
      margin-right: 0;
    }
  }

  pre {
    overflow-x: scroll;
  }
}