@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Overpass:wght@400;700&display=swap");

@layer reset, base, components;

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

  *:not(dialog) {
    margin: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

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

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

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  #root,
  #__next {
    isolation: isolate;
  }
}

@layer base {
  body {
    background-color: light-dark(#f8fafc, #334155);
    color: light-dark(#475569, #ffffff);
    font:
      1.125rem/1.75rem "Overpass",
      sans-serif;
  }

  h1 {
    color: #f87171;
    font:
      3rem/1.625 "Bree Serif",
      serif;

    @media (min-width: 640px) {
      font-size: 3.75rem;
    }
  }

  h2 {
    font:
      1.5rem/2rem "Bree Serif",
      serif;
  }

  h3 {
    font:
      700 1.25rem/1.75rem "Bree Serif",
      serif;
  }

  a {
    color: currentColor;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      color: #f87171;
    }
  }
}

@layer components {
  body {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 1280px;
    min-block-size: 100dvh;
    padding-inline: 2rem;

    @media (min-width: 640px) {
      padding-inline: 2.5rem;
    }
  }

  header[role="banner"] {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: "Bree Serif", serif;
    gap: 1.5rem;
    padding-block: 1.25rem;

    @media (min-width: 640px) {
      flex-direction: row;
      justify-content: space-between;
      padding-block: 2.5rem;
    }

    a {
      align-items: center;
      display: flex;
      gap: 0.5rem;
      text-decoration-line: none;

      &:has(img) {
        color: currentColor;
      }
    }

    img {
      block-size: 1.5rem;
      border-radius: calc(infinity * 1px);
      inline-size: 1.5rem;

      @media (min-width: 640px) {
        block-size: 3rem;
        inline-size: 3rem;
      }
    }

    ul {
      block-size: 1.75rem;
      display: flex;
      gap: 2rem;
      list-style: none;

      a[aria-current="page"] {
        color: #f87171;
      }
    }
  }

  main {
    flex: 1 1 0%;
    margin-block: 2.5rem 10rem;
  }

  section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    h2 a {
      text-decoration-line: none;
    }
  }

  section.home {
    max-inline-size: 768px;

    ul {
      display: flex;
      flex-wrap: wrap;
      font-size: 1.25rem;
      font-weight: 600;
      gap: 0.25rem;
      line-height: 1.75rem;
      list-style: inside "#";
      padding: 0;
    }
  }

  .joblist {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .postlist {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-inline: auto;
    max-inline-size: 768px;
  }

  article {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-inline: auto;
    max-inline-size: 768px;
  }

  footer {
    align-items: center;
    display: flex;
    flex-direction: column;
    font:
      0.875rem/1.25rem "Bree Serif",
      serif;
    gap: 1.5rem;
    padding-block: 1.25rem;

    @media (min-width: 640px) {
      flex-direction: row;
      justify-content: space-between;
    }

    a {
      text-decoration-line: none;
    }

    span {
      display: flex;
      gap: 0.25rem;
    }
  }
}