:root {
  /* Old color pallete I was playing with before below.
  --color-50: oklch(0.95 0.025 258.22);
  --color-200: oklch(0.867 0.068 258.22);
  --color-300: oklch(0.783 0.114 258.22);
  --color-500: oklch(0.7 0.162 258.22);
  --color-700: oklch(0.567 0.244 258.22);
  --color-800: oklch(0.433 0.195 258.22);
  --color-950: oklch(0.3 0.135 258.22);
*/
/*Deep ocean blue color pallete below */
  --color-1: oklch(0.25 0.08 250);
  --color-2: oklch(0.3 0.1 255);
  --color-3: oklch(0.35 0.12 260);
  --color-4: oklch(0.4 0.14 265);
  --color-5: oklch(0.45 0.15 270);
  --color-6: oklch(0.5 0.16 273);
  --color-7: oklch(0.55 0.15 275);
  --color-8: oklch(0.65 0.12 280);



  /* Text colors for each blue background */
  /*
  --text-on-50: #000000;
  --text-on-200: #000000;
  --text-on-300: #000000;
  --text-on-500: #000000;
  --text-on-700: #FFFFFF;
  --text-on-800: #FFFFFF;
  --text-on-950: #FFFFFF;
*/

  --text-on-1: #CBD5E1;
  --text-on-2: #CBD5E1;
  --text-on-3: #CBD5E1;
  --text-on-4: #CBD5E1;
  --text-on-5: #CBD5E1;
  --text-on-6: #E2E8F0;
  --text-on-7: #FFFFFF;
  --text-on-8: #F1F5F9;

  /* Choose the page's background and matching text */
  --bg: var(--color-3);
  --text: var(--text-on-3);

}