:root {
  --padding: 40px;
  --gap: 1.5rem;
  --color-black: #000;
  --color-white: #fff;
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-75: rgba(255, 255, 255, 0.75);
  --color-white-100: rgba(255, 255, 255, 1);
  --color-black-25: rgba(0, 0, 0, 0.25);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-75: rgba(0, 0, 0, 0.75);
  --color-black-90: rgba(0, 0, 0, 0.90);
  --color-black-100: rgba(0, 0, 0, 1);
  --color-grey: #777;
  --color-light: #cccccc;
  --color-text: var(--color-white);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-black);
  --color-code-light-grey:  #cacbd1;
  --color-code-comment:     #a9aaad;
  --color-code-white:       #c5c9c6;
  --color-code-red:         #d16464;
  --color-code-orange:      #de935f;
  --color-code-yellow:      #f0c674;
  --color-code-green:       #a7bd68;
  --color-code-aqua:        #8abeb7;
  --color-code-blue:        #7e9abf;
  --color-code-purple:      #b294bb;
  --pico-text-selection-color: rgba(2, 154, 232, 0.25);
  --font-family-sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-display: "Kabel", Helvetica, Arial, sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --font-family-icon: "Yarndings";

  --pico-color: var(--color-white);
}

@media screen and (max-width: 40rem) {
  :root {
    --gap: 1rem;
  }
}