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

@layer base {
  * {
    @apply text-white
  }
  body {
    @apply bg-mixed-100
  }
  input {
    @apply py-2 px-4 rounded-full bg-mixed-200 placeholder:text-dark-500
  }
  h1,h2,h3,h4,h5,h6 {
    @apply font-bold
  }
  p {
    @apply py-1
  }
}

@layer components {
  .strapline {
    @apply text-primary-500 uppercase font-bold mb-2 text-lg
  }

  .card {
    @apply bg-mixed-200 rounded-3xl p-6 shadow-2xl
  }

  .btn-primary {
    @apply bg-primary-500 py-4 px-6 text-mixed-100 rounded-full font-bold text-lg
  }
  .btn-secondary {
    @apply text-primary-500 py-4 px-6 font-bold text-lg
  }
}