@layer base {

  /*
   * Font faces for Roboto Flex and Roboto Mono.
   *
   * - https://fonts.google.com/specimen/Roboto+Flex
   * - https://fonts.google.com/specimen/Roboto+Mono
   *
   * The TTF fonts have been compressed to woff2,
   * preserving the latin character subset.
   *
   * */

  /* Roboto Flex */
  @font-face {
    font-family: 'Roboto Flex';
    src: url('/assets/fonts/RobotoFlex.woff2') format('woff2');
    font-weight: 100 1000; /* Range of weights Roboto Flex supports */
    font-stretch: 100%; /* Range of width Roboto Flex supports */
    font-style: oblique 0deg 10deg; /* Range of oblique angle Roboto Flex supports */
    font-display: fallback;
  }

  /* Roboto Mono */
  @font-face {
    font-family: 'Roboto Mono';
    src: url('/assets/fonts/RobotoMono-Regular.woff2') format('woff2');
    font-weight: 100 700; /* Define the range of weight the variable font supports */
    font-style: normal;
    font-display: fallback;
  }

  /* Roboto Mono Italic */
  @font-face {
    font-family: 'Roboto Mono';
    src: url('/assets/fonts/RobotoMono-Italic.woff2') format('woff2');
    font-weight: 100 700; /* Define the range of weight the variable font supports */
    font-style: italic;
    font-display: fallback;
  }

  .prose {
    li {
      @apply my-2;
      > :last-child,
      > :first-child {
        margin: 0;
      }
    }
    a {
      font-weight: 400;
    }
    hr {
      @apply mb-4 mt-8;
    }
    h1 {
      @apply my-4 text-4xl;
      line-height: 1.167;
    }
    h2 {
      @apply mb-4 mt-8 text-3xl;
      line-height: 1.2;
    }
    h3 {
      @apply text-2xl;
      line-height: 1.167;
    }
    h4 {
      @apply text-xl;
      line-height: 1.235;
    }
    h5 {
      @apply text-lg;
      line-height: 1.75;
    }
  }
}