@font-face {
  font-family: computer;
  src: url(/fonts/computer.woff);
}

/* Grays
  --value9: hsl(0, 0%, 100%);
  --value8: hsl(210, 17%, 98%);
  --value8a: hsl(210, 17%, 98%, 0);
  --value7: hsl(210, 16%, 93%);
  --value6: hsl(210, 14%, 89%);
  --value5: hsl(210, 14%, 83%);
  --value4: hsl(210, 11%, 71%);
  --value3: hsl(208, 7%, 46%);
  --value2: hsl(210, 9%, 31%);
  --value1: hsl(210, 10%, 23%);
  --value0: hsl(210, 11%, 15%);

  Greens
  --value9: #f7fcf5;
  --value8: #e5f5e0;
  --value8a: hsl(210, 17%, 98%, 0);
  --value7: #83cad4;
  --value6: #73c17a;
  --value5: #006d2c;
  --value4: hsl(210, 11%, 71%);
  --value3: hsl(208, 7%, 46%);
  --value2: hsl(210, 9%, 31%);
  --value1: #06160c;
  --value0: #010402;
*/

:root {
  --value9: #f7fcf5;
  --value8: #e5f5e0;
  --value8a: hsl(210, 17%, 98%, 0);
  --value7: #daf0d5;
  --value6: #73c17a;
  --value5: #238b45;
  --value4: #006d2c;
  --value3: #105329;
  --value2: #0e321b;
  --value1: #06160c;
  --value0: #010402;

  --gray9: hsl(0, 0%, 100%);
  --gray8: hsl(210, 17%, 98%);
  --gray8a: hsl(210, 17%, 98%, 0);
  --gray7: hsl(210, 16%, 93%);
  --gray6: hsl(210, 14%, 89%);
  --gray5: hsl(210, 14%, 83%);
  --gray4: hsl(210, 11%, 71%);
  --gray3: hsl(208, 7%, 46%);
  --gray2: hsl(210, 9%, 31%);
  --gray1: hsl(210, 10%, 23%);
  --gray0: hsl(210, 11%, 15%);

  --orange: hsl(19, 97%, 41%);
  --yellow: hsl(44, 100%, 52%);
  --red: hsl(334, 100%, 50%);
  --purple: hsl(265, 83%, 57%);
  --blue: hsl(217, 100%, 61%);
  --green: hsl(98, 32%, 45%);
  --black: hsl(240, 100%, 0%);

  --invert-orange: var(--value9);
  --invert-yellow: var(--value0);
  --invert-red: var(--value9);
  --invert-purple: var(--value9);
  --invert-blue: var(--value9);
  --invert-green: var(--value9);

  --color-accent: var(--value7);
  --color-bg-inverted: var(--gray6);
  --color-bg-secondary: var(--gray2);
  --color-bg-code-text: var(--value2);
  --color-bg-tertiary: var(--value3);
  --color-bg: var(--value0);
  --color-border: var(--gray3);
  --color-error: var(--red);
  --color-good: var(--green);
  --color-icon-image: var(--value8);
  --color-inactive: var(--value4);
  --color-info: var(--yellow);
  --color-input-bg: var(--value7);
  --color-input-border: var(--value7);
  --color-input-button: var(--value6);
  --color-overlay-background: var(--value2);
  --color-overlay-shadow: var(--value6);
  --color-overlay-text: var(--value7);
  --color-play-icon: var(--value4);
  --color-pulse-1: hsla(0, 0%, 80%, 1);
  --color-pulse-2: hsla(0, 0%, 80%, 0.7);
  --color-pulse-3: hsla(0, 0%, 80%, 0.1);
  --color-pulse-4: hsla(0, 0%, 80%, 0);
  --color-secondary-accent: var(--value7);
  --color-secondary: var(--value7);
  --color-shadow-secondary: var(--value6);
  --color-shadow: var(--value2);
  --color-text-inverted: var(--value0);
  --color-text-secondary: var(--value8);
  --color-text: var(--value9);
  --color-warning: var(--orange);
  --color: var(--value9);
  --gray-bg: var(--gray1);
  --color-scrollbar-thumb: hsla(0, 0%, 40%, 0.8);
  --color-scrollbar-track-piece: hsla(0, 0%, 20%, 0.8);
  --color-bg-transparent: var(--value8a);
  --color-bg-code: var(--gray1);
  --color-border-tabs: var(--value6);
  --color-shadow-dark: var(--value2);


  --font-family: "Andale Mono", "Monaco", monospace, monospace;
  --font-title: "Palatino", serif;
  --font-computer: "computer", monospace;
  --font-size: 1.05em;
  --font-text-size: 1.4em; /* for paragraphs mostly */
  --font-label-size: 1rem;
  --font-heading-size: 1.2em;
  --font-heading-weight: 300;
  --font-header-nav: 1.3em;
  --font-button-size: 1.4em;
  --hover-brightness: 0.9;
  --justify-important: center;
  --justify-blockquote: left;
  --justify-normal: left;
  --line-height: 1.5;
  --width-sidebar: 320px;
  --width-card: 385px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1080px;
  --width-badge: 20px;
  --font-size-badge: 13px;
  --fixed-header-height: 73px;
  --fixed-footer-height: 400px;
  --color-scrollbar-thumb: hsla(0, 0%, 60%, 0.8);
  --color-scrollbar-track-piece: hsla(0, 0%, 100%, 0.9);

  --color-bg-header: var(--value0);
  --color-text-header: var(--value9);
}