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

h1, h2, h3, p, cite, blockquote, li {
  @apply text-neutral-800 dark:text-amber-50;
}

@layer components {
  .x-link {
    @apply text-amber-600 dark:text-amber-400 hover:text-amber-500 decoration-from-font;
  }

  .x-form-input {
    @apply w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
  }

  .x-btn {
    @apply text-white bg-blue-700 hover:bg-blue-800 border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 cursor-pointer;
  }
}

h1 {
  @apply text-2xl font-bold md:text-3xl dark:text-white tracking-tight;
}

h2 {
  @apply text-xl md:text-2xl dark:text-white tracking-tight;
}

h3 {
  @apply text-lg md:text-xl dark:text-white tracking-tight;
}

.turbo-progress-bar {
  @apply h-1 bg-amber-400 dark:bg-amber-600;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *


 */