index.css

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

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/Inter-Variable.ttf") format("truetype");
}

@layer base {
  h1 {
    @apply text-2xl md:text-4xl lg:text-5xl;
  }
  h2 {
    @apply text-xl md:text-3xl lg:text-4xl;
  }
  h3 {
    @apply text-lg md:text-2xl lg:text-3xl;
  }
  h4 {
    @apply text-base md:text-xl lg:text-2xl;
  }
  h5 {
    @apply text-sm md:text-lg lg:text-xl;
  }
  h6 {
    @apply text-xs md:text-base lg:text-lg;
  }
  p {
    @apply text-base md:text-lg;
  }

  button {
    @apply text-lg md:text-xl lg:text-2xl;
  }
}

@layer components {
  .ease {
    @apply transition duration-300 ease-in-out;
  }
}