html {
  --container-width: 1200px; /* 1224 */
  @media screen and (max-width: 66rem) { /* 66rem = 1056px tablet */
    --container-width: 650px;
  }
  @media screen and (max-width: 44rem) { /* 44rem = 704px mobile */
    --container-width: 360px;
  }

  --fh: 'Crimson Text', serif;
  
  /* Colors */
  --standard-g1: #1e1e1e;
  --standard-g2: #4b5056;
  --standard-g3: #787c85;
  --standard-g4: #e6e6e6;
  --standard-g5: #eeeeee;
  --standard-g6: #ffffff;

  --main-mc1: #b89661;
  --alt-mc1: #d1b486;
  --main-dc1: #00b8db;
  --brighter-bc1: #00c5ff;
  --darker-dc1: #008da7;

  --main-mc2: #00b8db;
  --alt-mc2: #0987a0;
  --brighter-bc2: #00b8db;
  --darker-dc2: #008da7;

  --main-mc3: #2e3158;

  /*shorter*/
  --g1: var(--standard-g1);
  --g2: var(--standard-g2);
  --g3: var(--standard-g3);
  --g4: var(--standard-g4);
  --g5: var(--standard-g5);
  --g6: var(--standard-g6);

  --mc1: var(--main-mc1);
  --mc1a: var(--alt-mc1);
  --bc1: var(--brighter-bc1);
  --dc1: var(--darker-dc1);

  --mc2: var(--main-mc2);
  --mc2a: var(--alt-mc2);
  --bc2: var(--brighter-bc2);
  --dc2: var(--darker-dc2);

  --mc3: var(--main-mc3);
}