@layer base {
  * {
    @apply font-rubik;
  }

  body {
    @apply text-body;
  }

  /* Don't make people add class="font-medium"
   * to elements that should be bold. */
  b,
  strong {
    @apply font-medium;
  }

  pre {
    @apply whitespace-pre-wrap;
  }

  pre,
  code {
    @apply font-mono;

    * {
      @apply font-inherit;
    }
  }

  .display-lg {
    @apply text-display-lg font-light;
  }

  .display-sm {
    @apply text-display-sm font-light;
  }

  .title-xl {
    @apply text-title-xl font-medium;
  }

  .title-lg {
    @apply text-title-lg font-medium;
  }

  .title-md {
    @apply text-title-md font-medium;
  }

  .title-sm {
    @apply text-title-sm font-medium;
  }

  .title-xs {
    @apply text-title-xs font-medium;
  }

  .big-desc {
    @apply text-big-desc font-regular;
  }

  .small {
    @apply text-small !important;
  }

  .font-mono {
    @apply text-small;
  }

  @screen lg {
    .display-lg {
      @apply text-display-lg-desktop font-light;
    }

    .display-sm {
      @apply text-display-sm-desktop font-light;
    }

    .title-xl {
      @apply text-title-xl-desktop;
    }

    .title-lg {
      @apply text-title-lg-desktop;
    }

    .title-md {
      @apply text-title-md-desktop font-medium;
    }

    .title-sm {
      @apply text-title-sm-desktop font-medium;
    }

    .title-xs {
      @apply text-title-xs-desktop font-medium;
    }

    .big-desc {
      @apply text-big-desc-desktop font-regular;
    }
  }
}