*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --color-bg: #000;
  --font-text: 'Recursive', monospace;
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 18px;
  --lh-m: 1.25;
  --lh-l: 1.5;
  --ls-s: 0.05em;
  --width-body: 88ch;
  --spacer-s: 8px;
  --spacer-m: 16px;
  --spacer-l: 24px;
  --spacer-xl: 32px;
  --spacer-xxl: 40px;
  --bp-l: 1200px;
  --bp-m: 992px;
  --bp-s: 576px;

  --gray-000: #fafbfc;
  --gray-100: #f6f8fa;
  --gray-200: #e1e4e8;
  --gray-300: #d1d5da;
  --gray-400: #959da5;
  --gray-500: #6a737d;
  --gray-600: #586069;
  --gray-700: #444d56;
  --gray-800: #2f363d;
  --gray-900: #24292e;
  --blue-000: #f1f8ff;
  --blue-100: #dbedff;
  --blue-200: #c8e1ff;
  --blue-300: #79b8ff;
  --blue-400: #2188ff;
  --blue-500: #0366d6;
  --blue-600: #005cc5;
  --blue-700: #044289;
  --blue-800: #032f62;
  --blue-900: #05264c;
  --green-000: #f0fff4;
  --green-100: #dcffe4;
  --green-200: #bef5cb;
  --green-300: #85e89d;
  --green-400: #34d058;
  --green-500: #28a745;
  --green-600: #22863a;
  --green-700: #176f2c;
  --green-800: #165c26;
  --green-900: #144620;
  --yellow-000: #fffdef;
  --yellow-100: #fffbdd;
  --yellow-200: #fff5b1;
  --yellow-300: #ffea7f;
  --yellow-400: #ffdf5d;
  --yellow-500: #ffd33d;
  --yellow-600: #f9c513;
  --yellow-700: #dbab09;
  --yellow-800: #b08800;
  --yellow-900: #735c0f;
  --orange-000: #fff8f2;
  --orange-100: #ffebda;
  --orange-200: #ffd1ac;
  --orange-300: #ffab70;
  --orange-400: #fb8532;
  --orange-500: #f66a0a;
  --orange-600: #e36209;
  --orange-700: #d15704;
  --orange-800: #c24e00;
  --orange-900: #a04100;
  --red-000: #ffeef0;
  --red-100: #ffdce0;
  --red-200: #fdaeb7;
  --red-300: #f97583;
  --red-400: #ea4a5a;
  --red-500: #d73a49;
  --red-600: #cb2431;
  --red-700: #b31d28;
  --red-800: #9e1c23;
  --red-900: #86181d;
  --purple-000: #f5f0ff;
  --purple-100: #e6dcfd;
  --purple-200: #d1bcf9;
  --purple-300: #b392f0;
  --purple-400: #8a63d2;
  --purple-500: #6f42c1;
  --purple-600: #5a32a3;
  --purple-700: #4c2889;
  --purple-800: #3a1d6e;
  --purple-900: #29134e;
  --pink-000: #ffeef8;
  --pink-100: #fedbf0;
  --pink-200: #f9b3dd;
  --pink-300: #f692ce;
  --pink-400: #ec6cb9;
  --pink-500: #ea4aaa;
  --pink-600: #d03592;
  --pink-700: #b93a86;
  --pink-800: #99306f;
  --pink-900: #6d224f;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-rows: 1fr max-content;
  grid-template-areas:
    'pad'
    'toolbar';
  font-family: var(--font-text);
  font-size: var(--font-size-s);
  line-height: var(--lh-m);
  color: var(--gray-200);
  background-color: var(--color-bg);
}

@media screen and (min-width: 576px) {
  body {
    grid-template-rows: max-content 1fr;
    grid-template-areas:
      'toolbar'
      'pad';
  }
}

@media screen and (min-width: 992px) {
  body {
    grid-template-rows: max-content 1fr;
    grid-template-areas:
      'toolbar'
      'pad';
  }
}