:root {
  --taupe: #463f3a;
  --grey-olive: #8a817c;
  --silver: #bcb8b1;
  --white: #ffffff;
  --light: #fbfafa;
  --accent: #1789fc;
  --black: #000000;
  --colors-section-one: #020887;
  --colors-section-two: #1789fc;
  --colors-section-three: #0a369d;
  --colors-section-four: #6320ee;
  --container-max: 1240px;
  --gutter-desktop: 20px;
  --gutter-tablet: 16px;
  --gutter-mobile: 8px;
  --border-strong: 2px solid var(--black);
  --focus-ring: 3px solid var(--accent);
  --shadow-strong: 12px 12px 0 var(--black);
}

@media (min-width: 1280px) {
  :root {
    --page-gutter: var(--gutter-desktop);
  }
}

@media (min-width: 820px) and (max-width: 1279px) {
  :root {
    --page-gutter: var(--gutter-tablet);
  }
}

@media (max-width: 819px) {
  :root {
    --page-gutter: var(--gutter-mobile);
  }
}