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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html {
  @apply text-black;
}

body {
  hyphens: auto;
}

svg {
  @apply fill-current;
}

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

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

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

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

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

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

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

  .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 w-full max-w-5xl px-4 py-4 lg:px-8;
  }

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

  .filter-blue-900 {
    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%)
      contrast(105%);
  }
}

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

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

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

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

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

  .btn-large-icon {
    @apply flex items-center px-6 py-3  text-xl font-bold;
  }
}

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

  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}