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


@layer components {

  h1 {
    @apply text-4xl font-bold my-10 text-center text-slate-900
  }

  h2 {
    @apply text-3xl font-bold my-6 text-center text-slate-800
  }

  .form-label {
    @apply block mb-2 text-sm font-medium text-slate-700
  }

  .form-field {
    @apply block w-full font-medium text-black border-0 rounded-md shadow-sm bg-slate-50 ring-1 ring-inset ring-slate-400 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6 disabled:text-slate-800 disabled:ring-slate-200;
  }

  .form-button {
    @apply text-white bg-indigo-600 hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-bold rounded-lg text-base w-auto px-5 p-2.5 text-center
  }

  .form-cancel-button {
    @apply text-sm font-semibold leading-6 text-slate-900 hover:bg-slate-700 hover:text-white hover:rounded-lg p-2.5 w-auto
  }

  .link {
    @apply font-bold text-indigo-600 hover:underline
  }

}

/*

@layer components {
  .btn-primary {
    @apply px-4 py-2 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, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */