/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-v31-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/montserrat-v31-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/montserrat-v31-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
  --font-body:
    "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  --font-headings: var(--font-body);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;

  --fs-9xl: clamp(2.25rem, 0.5473rem + 6.486vw, 6.75rem);
  --fs-8xl: clamp(2.125rem, 0.80068rem + 5.045vw, 5.625rem);
  --fs-7xl: clamp(2rem, 0.95946rem + 3.964vw, 4.75rem);
  --fs-6xl: clamp(1.875rem, 1.11824rem + 2.883vw, 3.875rem);
  --fs-5xl: clamp(1.75rem, 1.18243rem + 2.162vw, 3.25rem);
  --fs-4xl: clamp(1.625rem, 1.19932rem + 1.622vw, 2.75rem);
  --fs-3xl: clamp(1.5rem, 1.21622rem + 1.081vw, 2.25rem);
  --fs-2xl: clamp(1.375rem, 1.18581rem + 0.721vw, 1.875rem);
  --fs-xl: clamp(1.25rem, 1.10811rem + 0.541vw, 1.625rem);
  --fs-l: clamp(1.125rem, 1.03041rem + 0.36vw, 1.375rem);
  --fs-m: clamp(1rem, 0.9527rem + 0.18vw, 1.125rem);
  --fs-s: 1rem;
  --fs-xs: 0.875rem;
  --fs-2xs: 0.75rem;

  --space-5xl: 6.25rem;
  --space-4xl: 5rem;
  --space-3xl: 4rem;
  --space-2xl: 3rem;
  --space-xl: 2rem;
  --space-l: 1rem;
  --space-m: 0.75rem;
  --space-s: 0.625rem;
  --space-xs: 0.3125rem;

  --space-alpha: 2em;
  --space-bravo: 1em;

  --content-max-inline-size-fallback: 71.25rem;
  --section-padding: clamp(4rem, 2.90984rem + 4.59vw, 7.5rem);
  --columns-gap: clamp(1.875rem, 1.11824rem + 2.883vw, 3.875rem);
  --content-columns-gap-fallback: var(--columns-gap);
  --gap: 1.25rem;
  --br: 0.5rem;
  --br-btns: 100px;

  --clr-accent-400: #efb557;

  --bg-primary: #f3edda;
  --bg-secondary: var(--clr-970);

  --clr-heading: var(--clr-50);
  --clr-text: var(--clr-300);

  --red: hsl(0, 100%, 37%);
  --green: hsl(130 52% 46%);
  --yellow: hsl(44 83% 53%);
  --blue: hsl(215 100% 53%);
  --focus: hsl(289, 100%, 50%);
  --valid: var(--green);
  --invalid: var(--red);
  --clr-warning: var(--yellow);

  --gray: hsl(221.9deg, 24.71%, 50%);

  --box-shadow: 0px 0px 7px 6px hsla(0, 0%, 0%, 0.04);
  --box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 15px -3px, rgba(0, 0, 0, 0.02) 0px 4px 6px -2px;

  --clr-1000: hsl(0, 0%, 100%);
  --clr-970: hsl(0, 0%, 97%);
  --clr-950: hsl(0, 0%, 95%);
  --clr-900: hsl(0, 0%, 90%);
  --clr-850: hsl(0, 0%, 85%);
  --clr-800: hsl(0, 0%, 80%);
  --clr-750: hsl(0, 0%, 75%);
  --clr-700: hsl(0, 0%, 70%);
  --clr-650: hsl(0, 0%, 65%);
  --clr-600: hsl(0, 0%, 60%);
  --clr-550: hsl(0, 0%, 55%);
  --clr-500: hsl(0, 0%, 50%);
  --clr-450: hsl(0, 0%, 45%);
  --clr-400: hsl(0, 0%, 40%);
  --clr-350: hsl(0, 0%, 35%);
  --clr-300: hsl(0, 0%, 30%);
  --clr-250: hsl(0, 0%, 25%);
  --clr-200: hsl(0, 0%, 20%);
  --clr-150: hsl(0, 0%, 15%);
  --clr-100: hsl(0, 0%, 10%);
  --clr-50: hsl(0, 0%, 5%);
  --clr-0: hsl(0, 0%, 0%);

  color-scheme: light;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

input,
button,
textarea,
select {
  font: inherit;
}
textarea {
  resize: vertical;
}
textarea:not([rows]) {
  min-block-size: 4rem;
}
:target {
  scroll-margin-block: 5ex;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
li {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}