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

* {
  box-sizing: border-box;
  margin: 0;
}
html {
  font-family: 'Libre Franklin', Arial, 'Roboto',sans-serif;
  scroll-padding-top: 5rem;
  /* colors */
  --black: #000;
  --gray: #5F5F5F;
  --green: #29CF3D;
  --red: #FF5440;
  --red-50: #FFF6F5;
  --red-600: #C21300;
  --violet-30: #EFEEF9;
  --violet-50: #F9F9FD;
  --violet: #8580D2;
  --white: #fff;
  --yellow: #EAEE2C;      /* we brightened the yellow in early 2022 */
  --old-yellow: #E2E639;  /* can be removed if still here by late 2022 */
  /* font family */
  --font-family: 'Libre Franklin', Arial, 'Roboto',sans-serif;
  /* font values */
  --text-4xl: 2.75rem/3.5rem var(--font-family);
  --text-3xl: 2.375rem/3.25rem var(--font-family);
  --text-2xl: 1.75rem/2.5rem var(--font-family);
  --text-xl: 1.375rem/2.25rem var(--font-family);
  --text-lg: 1.125rem/1.75rem var(--font-family);
  --text-base: 1rem/1.75rem var(--font-family);
  --text-sm: 1rem/1.5rem var(--font-family);
  --text-xs:  .875rem/1.5rem var(--font-family);
}
* {
  box-sizing: border-box;
  margin: 0;
}
*:where(:focus:not(:focus-visible)) {
  outline:none;
}
*:where(:focus-visible) {
  outline: .125rem solid;
  outline-offset: .125rem;
}
a {
  text-decoration: underline;
  text-decoration-thickness: .125rem;
  text-underline-offset: .125rem;
  color: #000;
}
/* lists - override tailwind 'list-disc' utility */
ul.list-disc {
  list-style: initial;
  list-style-position: inside;
}
ul.list-disc li + li {
  margin-top: .25rem;
}
ul.list-disc li::marker {
  content: ' ';
}
ul.list-disc li::before {
  background-color: var(--black);
  border-radius: .375rem;
  content: '';
  display: inline-block;
  height: .25rem;
  vertical-align: middle;
  width: .5rem;
  margin-right: .5rem;
}

/* animations */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeIn {
    from { 
      opacity: 0;
      transform: translateY(1rem);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }
  .js-fade-in {
    opacity: 0;
  }
  [data-visible] .js-fade-in,
  .fade-in-immediate {
    animation-name: fadeIn;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .fade-in-immediate {
    opacity: 0;
    animation-delay: 0.2s;
  }

  @keyframes pulseIn {
    from { 
      opacity: 0.5;
      transform: scale(1.1);
    }
    to { 
      opacity: 1.0;
      transform: scale(1.0);
    }
  }
  [data-visible] .pulse-in {
    animation-name: pulseIn;
    animation-delay: 0s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* 
    slide in
    —
    restrict by screen size w/ media query so that
    this only happens at larger screen sizes...
    smaller screen sizes (e.g. mobile) do not have enough
    horizontal real-estate for it to really work.

    48em = 768px
  */
  @media screen and (min-width: 48em) {
    .js-slide-in-left { --slideDistance: -2rem; }
    .js-slide-in-right { --slideDistance: 2rem; }
    .js-slide-in-left, .js-slide-in-right {
      transform: translateX(var(--slideDistance));
      transition: all 0.6s ease;
      transition-property: transform, opacity;
      opacity: 0.5;
      will-change: transform, opacity;
    }
    [data-visible] .js-slide-in-left, [data-visible] .js-slide-in-right {
      transform: translateX(0);
      opacity: 1.0;
    }
  }
}