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

@layer components {
  .btn {
    @apply py-6 px-12 text-white rounded-3xl text-center align-middle;
  }

  .btn-green {
    @apply bg-inugreen hover:bg-inugreen-hover;
  }

  .btn-blue {
    @apply bg-inublue hover:bg-inublue-hover;
  }

  .btn-orange {
    @apply bg-inuorange hover:bg-inuorange-hover;
  }

  .text-animation {
    animation: size-animation 0.5s infinite alternate ease-in-out;
  }

  .input-green {
    @apply border-0;
    @apply bg-inugreen-light;
    @apply text-inugreen-dark;
    @apply focus:border-2;
    @apply focus:border-inugreen;
    @apply focus:ring-inugreen;
    @apply focus-within:border-2;
    @apply focus-within:border-inugreen;
    @apply focus-within:ring-inugreen;
    @apply h-[5.75rem];
  }

  .input-green.disabled {
    @apply text-gray-500;
  }

  .input-green option {
    @apply text-inugreen-dark;
  }

  .input-green option:disabled {
    @apply text-gray-500;
  }

  @keyframes size-animation {
    from {
      font-size: 3rem;
    }
    to {
      font-size: 18.25rem;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/Hind-Regular-48de903593839d483a5280c7034a6edd773cddbd29e31f8f6abf20573c3d76f0.ttf) format("truetype");
}

@font-face {
  font-family: 'Hind';
  font-style: bold;
  font-weight: 600;
  src: url(/assets/Hind-SemiBold-d2556d7185bde77f029117d6b4f40c02a795f332abc32716d61b1d728e6c8091.ttf) format("truetype");
}

.font-hind {
  font-family: 'Hind'
}