:root {
  /* Layout & Whitespace */
  --content-width: 949px;
  --content-gutter: 60px;
  --borderRadius-lg: 14px;
  --borderRadius-base: 8px;
  --borderRadius-sm: 3px;
  --navTabBorderWidth: 2px;

  /* Font Families */
  /* These mirror modern-normalize.css with "Lato" on top */
  --sansFontFamily: "Lato", system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --monoFontFamily: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;

  /* Typography */
  --baseLineHeight: 1.5em;

  /* Colours */
  --gray10: hsl(207, 43%, 98.5%);
  --gray25: hsl(207, 43%, 98%);
  --gray50: hsl(207, 43%, 96%);
  --gray100: hsl(212, 33%, 91%);
  --gray200: hsl(210, 29%, 88%);
  --gray300: hsl(210, 26%, 76%);
  --gray400: hsl(210, 21%, 64%);
  --gray450: hsl(210, 21%, 49%);
  --gray500: hsl(210, 21%, 34%);
  --gray600: hsl(210, 27%, 26%);
  --gray650: hsl(211, 32%, 22%);
  --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(43, 100%, 95%);
  --yellowDark: hsl(44, 100%, 15%);
  --yellow: hsl(60, 100%, 43%);
  --green-lightened-10: hsl(90, 100%, 45%);
  --green: hsl(90, 100%, 35%);
  --white: hsl(0, 0%, 100%);
  --white-opacity-80: hsla(0, 0%, 100%, 80%);
  --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-80: hsla(0, 0%, 0%, 80%);
  --black-opacity-50: hsla(0, 0%, 0%, 50%);
  --black-opacity-30: hsla(0, 0%, 0%, 30%);
  --black-opacity-10: hsla(0, 0%, 0%, 10%);
  --black-opacity-0: hsla(0, 0%, 0%, 10%);
  --orangeDark: hsl(30, 90%, 40%);
  --orangeLight: hsl(30, 80%, 50%);

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-md: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */

  --transition-duration: 150ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-all: all var(--transition-duration) var(--transition-timing);

  --transition-colors: color var(--transition-duration) var(--transition-timing),
  background-color var(--transition-duration) var(--transition-timing),
  border-color var(--transition-duration) var(--transition-timing),
  text-decoration-color var(--transition-duration) var(--transition-timing),
  fill var(--transition-duration) var(--transition-timing),
  stroke var(--transition-duration) var(--transition-timing);

  --transition-opacity: opacity var(--transition-duration) var(--transition-timing);
}

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

option {
  background-color: var(--sidebarBackground);
}
