:root {
  /* Layout & Whitespace */
  --content-width: 949px;
  --content-gutter: 60px;
  --borderRadius: 4px;
  --navTabBorderWidth: 4px;

  /* Font Families */
  --defaultFontFamily: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --sansFontFamily: "Lato", sans-serif;
  --monoFontFamily: "Inconsolata", Menlo, Courier, monospace;

  /* Typography */
  --baseFontSize: 18px;
  --baseLineHeight: 1.5em;

  /* Colours */
  --gray25: hsl(207, 43%, 98%);
  --gray50: hsl(207, 43%, 96%);
  --gray100: hsl(212, 33%, 91%);
  --gray200: hsl(210, 29%, 88%);
  --gray300: hsl(210, 26%, 84%);
  --gray400: hsl(210, 21%, 64%);
  --gray450: hsl(210, 21%, 49%);
  --gray500: hsl(210, 21%, 34%);
  --gray600: hsl(210, 27%, 26%);
  --gray700: hsl(212, 35%, 17%);
  --gray750: hsl(214, 46%, 14%);
  --gray800: hsl(216, 52%, 11%);
  --gray800-opacity-0: hsla(216, 52%, 11%, 0%);
  --gray850: hsl(216, 63%, 8%);
  --gray900: hsl(218, 73%, 4%);
  --gray900-opacity-50: hsla(218, 73%, 4%, 50%);
  --gray900-opacity-0: hsla(218, 73%, 4%, 0%);
  --coldGrayFaint: hsl(240, 5%, 97%);
  --coldGrayLight: hsl(240, 5%, 88%);
  --coldGray-lightened-10: hsl(240, 5%, 56%);
  --coldGray: hsl(240, 5%, 46%);
  --coldGray-opacity-10: hsla(240, 5%, 46%, 10%);
  --coldGrayDark: hsl(240, 5%, 28%);
  --coldGrayDim: hsl(240, 5%, 18%);
  --yellowLight: hsl(60, 100%, 81%);
  --yellowDark: hsl(60, 100%, 43%, 62%);
  --yellow: hsl(60, 100%, 43%);
  --green-lightened-10: hsl(90, 100%, 45%);
  --green: hsl(90, 100%, 35%);
  --white: hsl(0, 0%, 100%);
  --white-opacity-50: hsla(0, 0%, 100%, 50%);
  --white-opacity-10: hsla(0, 0%, 100%, 10%);
  --white-opacity-0: hsla(0, 0%, 100%, 0%);
  --black: hsl(0, 0%, 0%);
  --black-opacity-10: hsla(0, 0%, 0%, 10%);
  --black-opacity-50: hsla(0, 0%, 0%, 50%);
}

@media screen and (max-width: 768px) {
  :root {
    --content-width: 100%;
    --content-gutter: 20px;
  }
}