:root {
  --color-background: #000;
  --color-primary: #ffffff;
  --color-primary--transparent: rgba(255, 255, 255, 0.86);
  --color-secondary: rgb(120, 171, 150, 0.86);
  --color-secondary--light: rgb(119, 177, 157, 0.2);
  --color-secondary--x-light: rgb(119, 177, 157, 0.1);

  --unit--horizontal: 5vw;
  --unit--vertical: 1.7rem;

  --font-size-s: 0.8rem;
  --font-size-m: calc(var(--font-size-s) * 1.5);
  --font-size-l: calc(var(--font-size-m) * 1.5);
  --font-size-xl: calc(var(--font-size-l) * 1.5);
  --font-size-xxl: calc(var(--font-size-xl) * 1.5);

  --font-weight-light: 200;
  --font-weight-bold: 400;
  --font-weight-extra-bold: 550;
}

@media screen and (min-width: 640px) {
  :root {
    --color-background: #000;
    --color-primary: #ffffff;
    --color-primary--transparent: rgba(255, 255, 255, 0.86);
    --color-secondary: rgb(120, 171, 150, 0.86);
    --color-secondary--light: rgb(119, 177, 157, 0.25);
    --color-secondary--x-light: rgb(119, 177, 157, 0.15);

    --unit--horizontal: 5vw;
    --unit--vertical: 1.7rem;

    --font-size-s: 0.9rem;
    --font-size-m: calc(var(--font-size-s) * 1.5);
    --font-size-l: calc(var(--font-size-m) * 1.5);
    --font-size-xl: calc(var(--font-size-l) * 1.5);
    --font-size-xxl: calc(var(--font-size-xl) * 1.5);

    --font-weight-light: 200;
    --font-weight-bold: 400;
    --font-weight-extra-bold: 550;
  }
}