index.css

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl font-medium;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
}

@tailwind components;
@tailwind utilities;

body {
  @apply text-gray-700 text-opacity-90 overflow-y-hidden;
}

.box {
  @apply rounded-md border-2 border-gray-500 py-2 px-4 font-semibold text-gray-700 transition duration-300 ease-in-out hover:border-opacity-50 hover:shadow-lg;
}

.boxless {
  @apply py-2 px-4 font-semibold text-gray-700 my-2 transition duration-300 ease-in-out hover:shadow-lg;
}

.box:disabled {
  @apply text-opacity-50 opacity-50 cursor-not-allowed;
}

.btn-blue {
  @apply border-blue-700 text-blue-800;
}

.info {
  @apply focus:ring-0 focus:outline-none;
}

.bg-blue {
  @apply bg-blue-700;
}

.btn-purple {
  @apply border-indigo-600 text-indigo-800;
}

.info-purple {
  @apply border-indigo-600;
}

.bg-purple {
  @apply bg-indigo-600;
}

.btn-orange {
  @apply border-orange-600 text-orange-700;
}

.info-orange {
  @apply border-orange-600;
}

.bg-orange {
  @apply bg-orange-600;
}

.btn-round {
  @apply h-12 w-12 rounded-full shadow-md text-white font-extrabold text-2xl hover:shadow-2xl;
}

.btn-round-orange {
  @apply bg-orange-600  hover:bg-orange-700;
}

.btn-round:disabled {
  @apply bg-gray-500 bg-opacity-25 cursor-not-allowed;
}

.mobile-height {
  @apply h-screen;
}

.page {
  position: absolute;
  left: 0px;
  right: 0px;
}

.page-enter {
  opacity: 0;
  transform: translateY(100%);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0%);
  transition: opacity 300ms, transform 300ms;
}

.page-exit {
  opacity: 1;
  transform: translateY(0%);
}

.page-exit-active {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 300ms, transform 300ms;
}

.pulsate {
  animation-name: pulsate;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  animation-iteration-count: 5;
  animation-direction: alternate;
}

@keyframes pulsate {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.03, 1.03);
  }

  100% {
    opacity: 1;
    transform: scale(0.97, 0.97);
  }
}