:root {
  --color-text: 29, 45, 53;
  --color-background: 255, 255, 255;
  --color-link: 29, 45, 53;
  --color-code-background: 244, 246, 247;
  --color-syntax-comment: 122, 138, 145;
  --color-syntax-keyword: 165, 60, 138;
  --color-syntax-string: 38, 130, 95;
  --color-syntax-number: 184, 96, 32;
  --color-syntax-attribute: 41, 98, 168;
  --color-syntax-variable: 192, 64, 64;
  --color-syntax-function: 41, 98, 168;
  --type-base: calc(1.6em + 0.5vw);
  --type-xxxx-small: 30%;
  --type-xxx-small: 55%;
  --type-xx-small: 65%;
  --type-x-small: 75%;
  --type-small: 85%;
  --type-medium: 100%;
  --type-large: 120%;
  --type-x-large: 160%;
  --type-xx-large: 200%;
  --type-xxx-large: 300%;
  --type-xxxx-large: 400%;
}

@media screen and (min-width: 50em) {

  :root {
    --type-base: calc(0.9em + 0.9vw);
  }

}

@media screen and (min-width: 100em) {

  :root {
    --type-base: 2.75em;
  }

}