:root {
  
  --mobile-width: 600px;

  /* ============== Transitions =============== */
  --initial-fade-in-delay: 0.5s;
  --initial-fade-in: 2.0s;
  --color-theme-transitions: background-color 0.5s ease-in-out, color 0.5s ease-in-out, stroke 0.5s ease-in-out, fill 0.5s ease-in-out, opacity 0.5s ease-in-out;

  /* ============== Font =============== */
  --font-size: 16px;
  --font-family: Avenir, sans-serif;

  /* ============== Space =============== */
  --max-width: 768px;

  /* ===================================== */
  /* ============= Colors ================ */
  /* ===================================== */

  --offBlack-purple: rgb(40,38,40); 
  --offBlack-purple2: rgb(50,48,50);
  --offBlack-purple3: rgb(70,65,70);

  --offWhite: rgb(240,240,240);
  --offWhite-red-rgb: 200,190,180;
  --offWhite-red: rgb(var(--offWhite-red-rgb));
  --offWhite-red-transparent: rgba(var(--offWhite-red-rgb), 0.75);

  --red: red; 
  --red2: orangered;
  --red3: deeppink;
  --green: springgreen;
  --blue: dodgerblue;
  --blue2: cornflowerblue;
  --blue3: deepskyblue;
  --blue4: aqua;
  --blue5: slateblue;
  --yellow: gold;
  --yellow2: yellow;
  --yellow3: goldenrod;
  --orange: darkorange;

}

.dark-theme { /* ========== Default Color Theme ============= */
  --bg: var(--offBlack-purple2);
  --bg2: var(--offBlack-purple3);
  --font: var(--offWhite-red);
  --primary: var(--blue);
  --primary2: var(--blue2);
  --primary3: var(--blue5);
  --link-color-visited: var(--blue3);
  --box-shadow: var(--offWhite-red-transparent);
}

/* ========== Place Holder Proof of concept for *other* theme ============= */
.light-theme {
  --bg: var(--offWhite);
  --font: var(--offBlack-purple);
  --primary: var(--orange);
  --primary2: var(--yellow);
  --primary3: var(--yellow);
}