@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@400;600;700&display=swap');

/*----- Variables -----*/
:root {

  /* Typography */
  --primary-font: 'Open Sans', sans-serif;
  --secondary-font: 'Open Sans', sans-serif;
  --base-font-size: 0.875rem; /* 14px */
  --base-line-height: 1.375rem; /* 20px */
  --small-font-size: 0.875rem; /* 14px */

  /* Font Sizes */
  --h1-font-size: clamp(2.25rem, 6vw, 2.75rem);
  --h1-line-height: 3.75rem; /* 44px */
  --h2-font-size: clamp(1.5rem, 4vw, 1.5rem);
  --h2-line-height: 2.5rem; /* 40px */
  --h3-font-size: clamp(1.125rem, 3vw, 1.25rem);
  --h3-line-height: 1.875rem; /* 26px */
  --h4-font-size: 1.125rem; /* 18px */
  --h4-line-height: 1.625rem; /* 26px */

  /* Box Model */
  --spacer: 2.5rem; /* 40px */
  --spacer-2x: 5rem; /* 80px */
  --spacer-half: 1.25rem; /* 20px */

  /* Colors */
  --color-first: #bf1e2d;
  --color-second: #ffc20e;
  --dark-gray: #3f3f3f;
  --lz-gray: #787878;
  /*--light-gray: #f0f0f0;*/
  --very-light-gray: #f0f0f0;
}

/*----- Global Styles ----- */
body {
  font-family: var(--secondary-font);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  font-weight: 400; /* normal */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--dark-gray);
}

h1, .h1, h2, .h2, h3, .h3 {
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--primary-font);
  font-size: var(--h1-font-size) !important;
  line-height: var(--h1-line-height);
  font-weight: 700; /* bold */
  color: var(--dark-gray);
}

h2, .h2 {
  font-family: var(--primary-font);
  font-size: var(--h2-font-size) !important;
  line-height: var(--h2-line-height);
  font-weight: 700; /* bold */
  color: var(--dark-gray);
}

h3, .h3 {
  font-family: var(--primary-font);
  font-size: var(--h3-font-size) !important;
  line-height: var(--h3-line-height);
  font-weight: 700;
  color: var(--lz-gray);
}

h4, .h4 {
  font-family: var(--secondary-font);
  font-size: var(--h4-font-size) !important;
  line-height: var(--h4-line-height);
  font-weight: 400;
  color: var(--dark-gray);
}

@media (max-width: 1200px) {
  :root {
    --base-font-size: 0.875rem;
    --base-line-height: 1.5rem;
    --small-font-size: 0.75rem;
  }
}

@media screen and (max-width: 992px) {
  :root {
    --spacer: 1.25rem;
    --spacer-2x: 2.5rem;
    --spacer-half: 0.625rem;
  }
}