@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-weight: 100 900;
    src: url("/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
    font-family: "Outfit";
  }

  @font-face {
    font-weight: 100 900;
    src: url("/fonts/YoungSerif-Regular.ttf") format("truetype");
    font-family: "Young Serif";
  }

  h1,
  h2 {
    font-weight: 400;
    line-height: 100%;
    font-family: theme("fontFamily.serif");
  }

  h1 {
    color: theme("colors.dark-charcoal");
    font-size: 2.25rem;

    @media (min-width: 768px) {
      font-size: 2.5rem;
    }
  }

  h2 {
    color: theme("colors.brandy-red");
    font-size: 1.75rem;
  }

  h3 {
    color: theme("colors.dark-raspberry");
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 100%;
  }

  p {
    color: theme("colors.wenge-brown");
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;

    > strong {
      font-weight: 700;
    }
  }

  td {
    color: theme("colors.wenge-brown");
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;

    &:last-child {
      color: theme("colors.brandy-red");
      font-weight: 700;
    }
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  li {
    margin-left: 1.5rem;
    padding-left: 1rem;
  }
}

main > img:first-child {
  @media (max-width: 768px) {
    margin: -2rem 0 0 -2rem;
    width: 100vw;
    max-width: none;
  }
}