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

html {
  @apply text-gray-900
}

@layer base {

  h1 {
    @apply text-4xl md:text-5xl xl:text-7xl font-bold
  }

  .heading-1 {
    @apply text-4xl md:text-5xl xl:text-7xl font-bold
  }

  h2 {
    @apply text-3xl xl:text-4xl font-bold
  }

  .heading-2 {
    @apply text-3xl xl:text-4xl font-bold
  }

  h3 {
    @apply text-2xl font-bold
  }

  .heading-3 {
    @apply text-3xl xl:text-4xl font-bold
  }

  .link {
    @apply underline underline-offset-2
  }
}

@layer components {
  .circle-title {
    @apply text-9xl font-bold
  }

  .btn-primary {
    @apply font-bold py-2 px-4 align-middle inline-block
    bg-blue-900 text-white border-2 border-blue-900
    hover:bg-blue-700 hover:border-blue-700
    disabled:opacity-50
  }

  .btn-secondary {
    @apply font-bold py-2 px-4 align-middle inline-block
    bg-white text-blue-900 border-2 border-blue-900
    hover:bg-gray-100
    disabled:opacity-50
  }

  .btn-blue {
    @apply font-bold py-2 px-4 align-middle inline-block
    bg-sky-500 text-blue-900 border-2 border-sky-500
    hover:bg-sky-400 hover:border-sky-400
    disabled:opacity-50
  }

}