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

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

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

  .card {
    @apply dark:bg-mixed-200 bg-primary-500 rounded-3xl p-6 shadow-2xl 
    /* mix-blend-luminosity */
    /* @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
  }
  .p {
    @apply py-1
  }

  .poppable {
    @apply card dark:bg-mixed-300 bg-primary-600 p-2 rounded-lg transition-opacity data-[visible=true]:z-10 data-[visible=true]:opacity-100 data-[visible=false]:opacity-0 -z-10 max-w-[400px] absolute
  }
}