supanextail/pages/global.css

@import 'tailwindcss/tailwind.css';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@400;600;700;800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 
You can setup basic rules for your headers/text here
*/

@layer base {
  h1 {
    @apply mb-5 text-5xl font-bold font-title;
  }
  h2 {
    @apply mt-2 mb-3 text-2xl font-title;
  }
  p {
    @apply mb-5 text-sm leading-loose text-left font-body text-base-200;
  }
  ul {
    @apply mb-3 ml-10 text-sm leading-loose list-disc font-body text-base-200;
  }
}

.nav-btn {
  position: relative;
  text-decoration: none;
  @apply my-auto text-base-200;
}

.nav-btn::before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  @apply bg-primary;
}

.nav-btn:hover::before {
  transform: scaleX(1);
}

.btn {
  @apply font-normal;
}