:root {
  /* Light theme */
  --c-light-text: #000;
  --c-light-background: #BF86BF url(/img/slow.gif);
  --c-light-title-background: url("/img/purplesandstone.bmp") #660066;
  --c-light-article-background: #FFF8DC;
  --c-light-focus: #C00000;
  --c-light-interactive: #800000;

  /* Dark theme */
  --c-dark-text: #fff;
  --c-dark-background: #301934 url("/img/backstar.gif");
  --c-dark-title-background: url("/img/darkpurplesandstone.bmp") #660066;  
  --c-dark-article-background: #1A1C1D;
  --c-dark-focus: #BF86BF;
  --c-dark-interactive: #BF86BF;
  /* --c-dark-focus: #FF0000; */
  /* --c-dark-interactive: #CC0000; */
}

:root, :root.light {
  /* set default theme */
  --c-text: var(--c-light-text);
  --c-background: var(--c-light-background);
  --c-title-background: var(--c-light-title-background);  
  --c-article-background: var(--c-light-article-background);  
  --c-focus: var(--c-light-focus);
  --c-interactive: var(--c-light-interactive);
}

/* /\* Override default theme with dark theme *\/ */
/* @media (prefers-color-scheme: dark) { */
/*   :root { */
/*     --c-text: var(--c-dark-text); */
/*     --c-background: var(--c-dark-background); */
/*     --c-title-background: var(--c-dark-title-background); */
/*     --c-article-background: var(--c-dark-article-background);       */
/*     --c-focus: var(--c-dark-focus); */
/*     --c-interactive: var(--c-dark-interactive); */
/*   } */
/* } */

:root.dark {
    --c-text: var(--c-dark-text);
    --c-background: var(--c-dark-background);
    --c-title-background: var(--c-dark-title-background);
    --c-article-background: var(--c-dark-article-background);      
    --c-focus: var(--c-dark-focus);
    --c-interactive: var(--c-dark-interactive);
}