@import url("https://fonts.googleapis.com/css2?family=Outfit:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --clr-yellow-100: 253 250 229;
  --clr-yellow-400: 241 219 80;
  --clr-red-400: 190 30 45;
  --clr-red-700: 69 23 27;
  --clr-yellow-orange-400: 250 172 46;
  --clr-orange-400: 241 89 41;

  --clr-white: 255 255 255;
  --clr-gray-100: 233 232 231;
  --clr-gray-200: 189 188 187;
  --clr-gray-300: 145 143 144;
  --clr-gray-400: 101 98 99;
  --clr-black: 35 31 32;
  --clr-black-900: 0 0 0;

  --fw-normal: 400;
  --fw-bold: 700;
  --fw-extrabold: 900;

  --space: min(2rem, 5vw);
  --max-width: min(100% - var(--space) - var(--space), 1440px);
}

/* For browsers that support clamp and container queries */
@supports (font-size: clamp(1rem, 1cqi, 1rem)) {
  :root {
    --fs-xs: clamp(0.741rem, -0.142cqi + 0.775rem, 0.633rem);
    --fs-sm: clamp(0.833rem, 0.014cqi + 0.83rem, 0.844rem);
    --fs-base: clamp(0.938rem, 0.248cqi + 0.877rem, 1.125rem);
    --fs-md: clamp(1.055rem, 0.588cqi + 0.911rem, 1.5rem);
    --fs-lg: clamp(1.187rem, 1.074cqi + 0.925rem, 1.999rem);
    --fs-xl: clamp(1.335rem, 1.758cqi + 0.906rem, 2.665rem);
    --fs-xxl: clamp(1.502rem, 2.711cqi + 0.841rem, 3.552rem);
  }
}
/* For browsers that don't support clamp or container queries */
@supports not (font-size: clamp(1rem, 1cqi, 1rem)) {
  :root {
    --fs-xs: 0.741rem;
    --fs-sm: 0.833rem;
    --fs-base: 0.938rem;
    --fs-md: 1.055rem;
    --fs-lg: 1.187rem;
    --fs-xl: 1.335rem;
    --fs-xxl: 1.502rem;
  }
  @media screen and (min-width: 1600px) {
    :root {
      --fs-xs: 0.633rem;
      --fs-sm: 0.844rem;
      --fs-base: 1.125rem;
      --fs-md: 1.5rem;
      --fs-lg: 1.999rem;
      --fs-xl: 2.665rem;
      --fs-xxl: 3.552rem;
    }
  }
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* outline: dotted 1px black; */
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-size: 1rem;
  accent-color: rgb(var(--clr-red-400));
}

body {
  font-weight: var(--fw-normal);
  line-height: 1.5;
  font-size: var(--fs-base);
  font-family: "Outfit", arial, helvetica, sans-serif;
  color: rgb(var(--clr-black));
}

html,
body {
  background-color: rgb(var(--clr-yellow-100) / 0.15);
}

.narrow-content {
  --max-width: min(100% - var(--space) - var(--space), 1200px);
}

/* flow */

:is(.flow, .divider, .content-main, .sidebar-content, .inset-box, .feature-box, .left-col, .right-col, .show-hide-content, .subsection, .intro) > * {
  margin-block: 0;
}

:is(.flow, .divider, .content-main, .sidebar-content, .inset-box, .feature-box, .left-col, .right-col, .show-hide-content, .subsection, .intro) > * + * {
  margin-top: 1.125em;
}

:is(.flow, .divider, .content-main, .sidebar-content, .inset-box, .feature-box, .left-col, .right-col, .show-hide-content, .subsection, .intro) > * + :is(.inset-box, .feature-box, section),
:is(.flow, .divider, .content-main, .sidebar-content, .inset-box, .feature-box, .left-col, .right-col, .show-hide-content, .subsection, .intro) > :is(.inset-box, .feature-box, section) + * {
  margin-top: 2.5em;
}

.flow-sm > *,
.flow-md > * {
  margin-block: 0;
}

.flow-sm > * + * {
  margin-top: 0.5em;
}

.flow-md > * + * {
  margin-top: 0.875em;
}

.main-content * + :is(h2, h3, h4, h5, h6) {
  margin-top: 1.75em !important;
}