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

@layer base {
  body {
    @apply bg-gradient-to-b from-white  to-gray-200 dark:from-gray-900 dark:via-black dark:to-black h-screen;
  }
  /* ... */
}

@layer components {
  .button-color {
    @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
  }

  .button-unsaturated {
    @apply text-black dark:text-white bg-gray-100 hover:bg-white border-gray-100 hover:border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center border
    dark:hover:border-gray-500 dark:border-gray-900 dark:bg-gray-900 dark:hover:bg-gray-800 dark:focus:ring-gray-700 focus:outline-0;
  }
}

.filter-dark {
  filter: invert(80%);
}

.filter-light {
  filter: invert(20%);
}

.filter-logo-dark {
  filter: invert(100%);
}

.filter-logo-light {
  filter: invert(0%);
}
