@import "/css/highlight.js/atom-one-light.css" screen;
@import "/css/highlight.js/atom-one-dark.css" screen and
  (prefers-color-scheme: dark);

@layer reset, base, layout, post, utilities;

:root {
  /* ATOMS */
  --color--white: #ffffff;
  --color--black: #121212;
  --color--dark-gray: #333333;
  --color--gray: #6c757d;
  --color--light-gray: #e0e0e0;
  --color--blue: #007bff;
  --color--green: #28a745;
  --size--quarter: 0.125rem;
  --size--half: 0.25rem;
  --size--1: 0.5rem;
  --size--2: 1rem;
  --size--3: 1.5rem;
  --size--4: 2rem;
  --size--5: 4rem;

  /* MOLECULES */
  --color--bg: light-dark(var(--color--white), var(--color--black));
  --color--text: light-dark(var(--color--dark-gray), var(--color--light-gray));
  --color--primary: var(--color--blue);
  --color--secondary: var(--color--gray);
  --color--accent: var(--color--green);
  --color--text-link: light-dark(var(--color--black), var(--color--white));
  --main-text--max-width: 100ch;
  --cover--max-width: 120ch;
  --main-text--p-gap: var(--size--3);
  --reponsive-index-max-width: min(100dvw, var(--cover--max-width));
  --reponsive-cover-max-width: min(100dvw, var(--cover--max-width));
  --reponsive-main-text-max-width: min(100dvw, var(--main-text--max-width));
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    --reponsive-main-text-max-width: min(96dvw, var(--main-text--max-width));
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: unset;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  img,
  picture,
  svg,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  html {
    font-family: helvetica, arial, system-ui, sans-serif;
    background-color: var(--color--bg);
    color: var(--color--text);
    font-size: 20px;
  }
  @media screen and (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  body > main {
    container-name: body-main;
    container-type: inline-size;
    overflow-x: hidden;
  }

  a,
  a:active,
  a:visited {
    text-decoration: underline 1px;
    color: var(--color--text-link);
  }
  a:hover {
    text-decoration: underline 2px;
    font-weight: 500;
  }
}

@layer layout {
  body > header nav {
    width: var(--reponsive-main-text-max-width);
    margin: auto;
    ul {
      list-style-type: none;
      padding-left: 0;
      &:first-of-type {
        li:first-of-type {
          a {
            font-family: Cursive;
            text-decoration: none;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  body > main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}