:root {
  --font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;

  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-100: #f7f8f9;
  --color-gray-200: #F8F9FA;
  --color-gray-250: #e7eaed;
  --color-gray-300: #abb5bd;
  --color-gray-400: #818992;
  --color-gray-450: #61656E;
  --color-gray-500: #5c6369;
  --color-blue-400: #0078FF;
  --color-blue-600: #005DC5;
  --color-blue-800: #002B5B;

  --gutter-xxs: 4px;
  --gutter-xs: 8px;
  --gutter-sm: 12px;
  --gutter-md: 16px;
  --gutter-lg: 20px;
  --gutter-xl: 24px;
  --gutter-xxl: 28px;
  --gutter-xxxl: 32px;
  --gutter-huge: 84px;

  --size-xs: 38px;
  --size-sm: 44px;
  --size-md: 84px;
  --size-lg: 118px;
  --size-xl: 128px;
  --size-xxl: 154px;

  --max-width: 450px;

  --transition: all 200ms ease-in-out;
}

@media screen and (max-width: 1432px) {
  :root {
    --gutter-huge: var(--gutter-xxxl);
  }
}
@media screen and (max-width: 1280px) {
  :root {
    --gutter-huge: var(--gutter-md);
  }
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-blue-800);
}

h1,
h2,
h3,
h4 {
  font-weight: normal;
}

h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--gutter-lg);
}

h3 {
  margin-top: var(--gutter-xxxl);
  margin-bottom: var(--gutter-lg);
  font-size: var(--font-size-sm);
}

p {
  font-size: var(--font-size-lg);
  line-height: var(--font-size-xl);
  max-width: var(--max-width);
}