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

html {
  @apply text-black
}

body {
  hyphens: auto;
}

svg {
  @apply fill-current
}

@layer base {
  .it-icon {
    @apply w-8 h-8 inline-block
  }

  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-2xl md:text-3xl xl:text-4xl font-bold
  }

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

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

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

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

  .link-large {
    @apply text-lg underline xl:text-xl
  }

  .text-large {
    @apply text-lg xl:text-xl
  }

  .text-bold {
    @apply text-base font-bold
  }

  .container-medium {
    @apply mx-auto max-w-5xl px-4 lg:px-8 py-4
  }

  .container-large {
    @apply mx-auto max-w-9xl px-4 lg:px-8 py-4
  }

}

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

  .btn-primary {
    @apply font-semibold 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 disabled:cursor-not-allowed
  }

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

  .btn-blue {
    @apply font-semibold 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 disabled:cursor-not-allowed
  }

  .btn-text {
    @apply font-semibold py-2 px-4 align-middle inline-block
    hover:text-gray-700
    disabled:opacity-50 disabled:cursor-not-allowed
  }
}

@layer utilities {
  .no-scroll {
    height: 100vh;
    overflow: hidden;
  }
}