/* Variables
   ========================================================================== */

:root {
  /* font family */
  --f-family: 'Open Sans', sans-serif;
  --f-family-c: 'Open Sans Condensed', sans-serif;
  /* font weight */
  --f-weight-l: 300;
  --f-weight-n: 400;
  --f-weight-sb: 600;
  --f-weight-b: 700;
  /* font size */
  --f-size-s-2: 75%;
  --f-size-s-1: 88%;
  --f-size: 100%;
  --f-size-l-1: 110%;
  --f-size-l-2: 125%;
  --f-size-l-3: 140%;
  --f-size-l-4: 180%;
  /* primary colors */
  --c-primary: 25, 110, 182;
  --c-primary-dark: 34, 74, 109;
  /* neutral colors */
  --c-neutral-lightest: 255, 255, 255;
  --c-neutral-lighter: 240, 240, 240;
  --c-neutral-light: 215, 215, 215;
  --c-neutral: 170, 170, 170;
  --c-neutral-dark: 51, 51, 51;
  --c-neutral-darker: 0, 0, 51;
  --c-neutral-darkest: 0, 0, 0;
  --c-error: 186, 6, 6;
  /* grid */
  --g-gap: 1.75rem;
  --g-gap-s: 0.75rem;
  /* border */
  --b-radius-s: 5px;
  /* padding for first level content elements */
  --p: 40px;
  /* margin for url scroll to element */
  --m-scroll: 9rem;
}

@media (min-width: 400px) {
  :root {
    /* padding for first level content elements */
    --p: calc(40px + (80 - 40) * ((100vw - 400px) / (1600 - 400)));
  }
}

@media (min-width: 1280px) {
  :root {
    /* font size */
    --f-size-l-2: 130%;
    --f-size-l-3: 155%;
    --f-size-l-4: 200%;
  }
}

@media (min-width: 1580px) {
  :root {
    /* font size */
    --f-size-l-2: 135%;
    --f-size-l-3: 165%;
    --f-size-l-4: 220%;
    /* padding for first level content elements */
    --p: 80px;
  }
}