body {
  @apply bg-gray-100;
}

h1 {
  @apply text-2xl font-extrabold text-cyan-800 md:text-3xl lg:text-4xl my-2;
}
h2 {
  @apply text-xl font-bold text-cyan-800 md:text-xl lg:text-2xl my-2 border-b border-cyan-700/10;
}
h3 {
  @apply text-lg md:text-lg lg:text-xl font-bold text-emerald-800 opacity-80;
}
h4 {
  @apply font-semibold;
}

.container {
  @apply max-w-7xl mx-auto px-2 sm:px-6 lg:px-8;
}
.page {
  @apply max-w-5xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8;
}

.bg-primary {
  @apply bg-gradient-to-b from-emerald-700 to-emerald-800;
}
.bg-secondary {
  @apply bg-gradient-to-b from-cyan-700 to-cyan-800;
}

.btn {
  @apply block mt-8 text-center bg-white px-5 py-3 text-sm md:text-base font-medium text-cyan-800 shadow w-full lg:w-fit rounded-md border border-gray-200 hover:bg-slate-100 cursor-pointer disabled:bg-slate-400 disabled:cursor-default;
}
.btn-dark {
  @apply btn bg-secondary text-slate-100 border-transparent hover:from-cyan-800 hover:to-cyan-800 disabled:bg-slate-400 !important;
}

input, textarea {
  @apply p-2 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:ring-offset-2;
}

.well {
  @apply bg-gray-200 p-4 border border-gray-300 shadow-inner rounded-md;
}

.alert {
  @apply bg-amber-500 text-white border-2 border-amber-700 rounded-md shadow-md p-4;
}
.success {
  @apply bg-emerald-600 text-emerald-100 border-2 border-emerald-800 rounded-md shadow-md p-4;
}

ul {
  @apply list-disc ml-8;
}
ol {
  @apply list-decimal ml-8;
}