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

@layer components {
  .karla-lightest {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
  }

  .karla-lighter {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }

  .karla-light {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .karla-normal {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }

  .karla-bold {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }

  .karla-bolder {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
  }

  .karla-boldest {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
  }

  .script-normal {
    font-family: "Tangerine", serif;
    font-weight: 400;
    font-style: normal;
  }

  .script-bold {
    font-family: "Tangerine", serif;
    font-weight: 700;
    font-style: normal;
  }

  /* headers */
  .page>h1,
  .event h1 {
    @apply text-4xl font-semibold;
  }

  .page>h2,
  .event h2 {
    @apply text-3xl font-semibold;
  }

  .page>h3,
  .event h3 {
    @apply text-2xl font-semibold;
  }

  .page>h4,
  .event h4 {
    @apply text-xl font-semibold;
  }

  .page>h5,
  .event h5 {
    @apply uppercase text-lg font-semibold;
  }

  .page>h6,
  .event h6 {
    @apply uppercase font-semibold;
  }

  /*event shadows*/
  .page.event {
    @apply border border-zinc-300 rounded shadow-lg shadow-zinc-300/50 pb-7;
  }

  /* lists */
  .page ol,
  .page ul {
    @apply list-inside ml-4;
  }

  .page ol>li {
    @apply list-decimal;
  }

  .page ul>li {
    @apply list-disc;
  }

  /* links */
  .page a {
    @apply link-primary;
  }

  .page a[href^="mailto:"] {
    @apply link-accent;
  }
}

@layer base {

  .ro-form input:not([type="submit"]),
  .ro-form select,
  .ro-form textarea,
  .ro-form div {
    @apply bg-gray-100;
  }

  #header>* {
    @apply max-h-40;
  }

  #header {
    -webkit-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
  }

  xfooter {
    @apply mt-auto ml-4 text-gray-500 text-xs;
  }

  .modal-window {
    @apply !max-w-5xl !max-h-[50dvh] !w-[60rem] !h-[35rem];
  }

  @media screen and (prefers-reduced-motion: reduce) {
    * {
      /* Very short durations means JavaScript that relies on events still works */
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  @media (inverted-colors) {

    img,
    video {
      filter: invert(100%);
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *


 */