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

/*

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

*/

@layer components {
  .link {
    @apply text-purple-400 underline hover:text-purple-600 print:text-black print:dark:text-stone-500;
  }

  .h1 {
    @apply text-4xl font-bold print:text-2xl;
  }

  .h2 {
    @apply text-2xl font-bold mb-4 print:text-base print:mb-2 text-stone-900 dark:text-stone-200;
  }

  .job-title {
    @apply text-xl print:text-sm font-extrabold text-stone-800 dark:text-stone-200;
  }

  .job-date {
    @apply text-stone-500 dark:text-stone-400 font-medium text-xs print:text-xs italic mb-1;
  }

  .job-paragraph {
    @apply text-sm text-stone-600 dark:text-stone-300 print:text-[10px] print:leading-[12px];
  }

  .card {
    @apply mb-4 border border-neutral-200 dark:border-neutral-800 rounded-2xl px-4 py-2 print:py-2 print:px-0 print:mb-0 print:border-0;
  }

  .study-title {
    @apply text-stone-900 dark:text-stone-200 print:text-xs font-bold;
  }

  .study-date {
    @apply job-date print:text-[10px] mb-1;
  }

  .study-paragraph {
    @apply job-paragraph text-xs print:text-[10px] print:leading-[12px];
  }

  .badge {
    @apply border rounded-xl py-1 px-2 w-fit border-neutral-200 dark:border-neutral-800 print:p-0 print:m-0 print:border-0 print:text-[10px];
  }
}
/*
 * 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.
 *


 */
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");