:root {
  /* fonts */
  --headline: "Linux Biolinum";
  --text: "Linux Biolinum";

  /* font weights */
  --headline-extrabold: 800;
  --text-regular: 400;
  --text-semi-bold: 600;
  --text-bold: 700;

  /* colors */
  --white: #fff;
  --black: #000;
  --grey-light: #efebdc;
  --grey: #808080;

  --blue: #00aff0;
  --green: #bedc0a;

  /* units */
  --base: 6px;
  --grid-gutter: 6.25vw;

  --space-1: var(--base);
  --space-2: calc(var(--base) * 2);
  --space-3: calc(var(--base) * 3);
  --space-4: calc(var(--base) * 4);
  --space-5: calc(var(--base) * 5);
  --space-6: calc(var(--base) * 6);
  --space-7: calc(var(--base) * 7);
  --space-8: calc(var(--base) * 8);
  --space-10: calc(var(--base) * 9);
  --space-15: calc(var(--base) * 10);
  --space-20: calc(var(--base) * 11);
  --space-30: calc(var(--base) * 12);

  --block-space: var(--space-15);
  --block-text-width: 800px;
  --block-text-wide-width: 800px;

  --diagonal: 5vw;
  --diagonal-space: calc(var(--diagonal) / 2);
}
@media (min-width: 800px) {
  :root {
    --base: 8px;
  }
}