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

@layer base {
  h2 {
    @apply font-bold text-secondary text-3xl;
  }
}

@layer components {
  .button {
    @apply block font-bold items-center md:bg-2x md:hover:shadow-md overflow-x-hidden rounded-lg text-ellipsis text-white px-4 py-4 whitespace-nowrap;
  }

  .button > img,
  .button > span {
    @apply mr-2;
  }

  .button > svg {
    @apply float-right;
  }

  .icon {
    @apply h-5 inline w-5;
  }

  .icon-box {
    @apply bg-secondary h-12 relative rounded-lg text-white w-12;
  }

  .icon-box-icon {
    @apply absolute h-5 left-1/2 top-1/2 transform w-5 -translate-x-1/2 -translate-y-1/2;
  }

  .image {
    @apply max-w-sm rounded-lg shadow-2xl shrink-0 w-full;
  }
}