:root {
  --primary-color: #182748;
  --secondary-color: #008cca;
  --navy-color: #0070a2;
  --orange-color: #ea7210;
  --pink-color: #d51a5f;
  --violet-color: #9c3282;
  --white-color: #fff;
  --black-color: #000;
  --green-color: #00a389;
  --gray-color: #697086;
  --rem-base: 10px;
  --font-size-base: 18px;
  --line-height-base: 1.45;
  --vertical-rhythm: calc(var(--line-height-base) * 1em);
  --color-brand: #000;
  --primary-btn-hover: #00618c;
  --orange-btn-hover: #d76304;
  --color-brand-dark: black;
  --color-brand-light: #262626;
  --color-secondary: #2b2e38;
  --base-text-color: #000;
  --base-link-color: black;
  --h1-h6-color: var(--navy-color);
  --animation-duration: 0.3s;
  --animation-timing-function: ease;
  --input-x: 26px;
  --gutter: 20px;
  --input-color: #697086;
  --input-placeholder-color: rgba(105, 112, 134, 0.5);
  --input-bg-color: #ecf0f3;
  --input-radius: 3px;
  --input-border-color: #0070a2;
  --input-focus-border-color: #008cca;
  --form-theme-color: #000;
  --checkbox-size: 18px;
  --radio-size: 18px;
  --label-fz: 14px;
  --label-color: #000;
  --error-color: #e04562;
  --error-bg-color: #fadee3;
  --form-col-gutter: 15px;
  --form-row-margin: 22.5px;
  --h1: 36px;
  --h2: 32px;
  --h3: 24px;
  --h4: 20px;
  --h5: 14px;
  --h6: 14px;
  --h1-title: 50px;
  --h2-title: 30px;
  --h3-title: 26px;
  --h4-title: 14px;
  --h5-title: 16px;
  --h6-title: 10px;
  --btn-y: 12px;
  --btn-x: 26px;
  --btn-b: 1px;
  --btn-r: 15px;
  --btn-fz: 20px;
}

@media (min-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  :root {
    --gutter: 50px;
  }
}

@media (max-width: 767px) {
  :root {
    --h1-title: 24px;
  }
}

@media (max-width: 667px) {
  :root {
    --btn-y: 12px;
    --btn-x: 26px;
  }
}