@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@layer utilities {
  * {
    -webkit-font-smoothing: antialiased;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .box-shadow-project {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.03),
      0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.05),
      0 1px rgba(0, 0, 0, 0.06), 0 0 0 8px rgba(0, 0, 0, 0.02),
      0 24px 48px rgba(0, 0, 0, 0.08);
  }
}

/* This is needed as there is a bug in Safari which is causing our font weights to render weirdly. */
@layer utilities {
  .font-thin,
  .font-extralight,
  .font-light,
  .font-normal,
  .font-medium,
  .font-semibold,
  .font-bold,
  .font-extrabold,
  .font-black {
    font-weight: unset;
  }

  .font-thin {
    font-variation-settings: 'wght' 100;
  }

  .font-extralight {
    font-variation-settings: 'wght' 200;
  }

  .font-light {
    font-variation-settings: 'wght' 300;
  }

  .font-normal {
    font-variation-settings: 'wght' 400;
  }

  .font-medium {
    font-variation-settings: 'wght' 500;
  }

  .font-semibold {
    font-variation-settings: 'wght' 600;
  }

  .font-bold {
    font-variation-settings: 'wght' 700;
  }

  .font-extrabold {
    font-variation-settings: 'wght' 800;
  }

  .font-black {
    font-variation-settings: 'wght' 900;
  }
}

@layer utilities {
  .prose h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
}
