@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;700&display=swap");

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

body {
  @apply bg-gradient-to-br from-custom-bglight to-custom-bgdark antialiased min-h-screen text-white;
}


.hero-text {
  @apply font-medium text-5xl lg:text-7xl xl:text-8xl;
}
.hero-text-pt {
  @apply font-medium text-4xl md:text-5xl lg:text-6xl xl:text-8xl;
}

.hero-sub-text {
  @apply italic text-lg md:text-2xl 2xl:text-3xl;
}
.hero-sub-text-pt {
  @apply italic text-lg md:text-xl 2xl:text-2xl;
}

.header-text {
  @apply mt-20 lg:mt-48 text-3xl md:text-5xl xl:text-7xl text-center;
}

.sub-header-text {
  @apply italic font-thin block text-sm mx-10 md:text-2xl mt-5 text-gray-400;
}

.form-input {
  @apply rounded-xl px-4 py-4 mt-2 bg-gray-bg border-solid border border-gray-300 text-xs md:text-xl;
}

.gold-text {
  @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark;
}

.fade-effect {
  animation: fadeEffect 1s ease-in-out;
}

.results-card-heading {
  @apply mt-2 lg:mt-6 text-3xl xl:text-5xl;
}
.results-card-heading-pt {
  @apply mt-2 lg:mt-6 text-2xl xl:text-4xl;
}

.results-card-content {
  @apply mb-5 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
}

.footer-text {
  @apply text-gray-400 font-medium text-xs md:text-base
}

.footer-text-pt {
  @apply text-gray-400 font-medium text-xs md:text-base
}

@keyframes fadeEffect {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
