color-scheme: light dark;

:root {
  --pageBackground: #ffffff;
  --pageText: #000000;
/*  --pageTextEm: #9d1e1e;  */

  --pageTextPantryAsNeeded: #8a5c00;
  --pageTextPantryBigShop: #8a0615;
  --pageTextPantrySmallShop: #00478a;

  --accent34: #929da8;
  --accent12: #c3d1e1;
  --accent0: #eef6ff;

  --linkUnvisited: #0067ce;
  --linkVisited: #5b168a;

  --transcriptPageBannerGradientMobile: linear-gradient(to bottom, 
                  rgba(255,255,255, 1) 96%, 
                  rgba(255,255,255, 0) 100%);

  --transcriptPageBannerGradientDesktop: linear-gradient(to bottom, 
                      rgba(255,255,255, 1) 12.8em, 
                      rgba(255,255,255, 0) 13.3em);
}


@media (prefers-color-scheme: light) {
  :root {
  --pageBackground: #ffffff;
  --pageText: #000000;
/*  --pageTextEm: #9d1e1e;  */

  --pageTextPantryAsNeeded: #8a5c00;
  --pageTextPantryBigShop: #8a0615;
  --pageTextPantrySmallShop: #00478a;

  --accent34: #929da8;
  --accent12: #c3d1e1;
  --accent0: #eef6ff;

  --linkUnvisited: #0067ce;
  --linkVisited: #5b168a;

  --transcriptPageBannerGradientMobile: linear-gradient(to bottom, 
                  rgba(255,255,255, 1) 96%, 
                  rgba(255,255,255, 0) 100%);

  --transcriptPageBannerGradientDesktop: linear-gradient(to bottom, 
                      rgba(255,255,255, 1) 12.8em, 
                      rgba(255,255,255, 0) 13.3em);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --pageBackground: #0d1217;
    --pageText: #8899a8;
/*    --pageTextEm: #c78b8b;  */


  --pageTextPantryAsNeeded: #a89776;
  --pageTextPantryBigShop: #a8767c;
  --pageTextPantrySmallShop: #88a891;

    --accent34: #4d6b85;
    --accent12: #2c3e4d;
    --accent0: #1b252e;

  --linkUnvisited: #4c7aa8;
  --linkVisited: #8b60a8;

  --transcriptPageBannerGradientMobile: linear-gradient(to bottom, 
                  rgba(13,18,23, 1) 96%, 
                  rgba(13,18,23, 0) 100%);

  --transcriptPageBannerGradientDesktop: linear-gradient(to bottom, 
                      rgba(13,18,23, 1) 12.8em, 
                      rgba(13,18,23, 0) 13.3em);


  }
}



body {
background-color: var(--pageBackground);
color: var(--pageText);
}

a:link {
  color: var(--linkUnvisited);
}

a:visited {
  color: var(--linkVisited);
}

.pantryAsNeeded {
  color: var(--pageTextPantryAsNeeded);
}

.pantryBigShop {
  color: var(--pageTextPantryBigShop);
}

.pantrySmallShop {
  color: var(--pageTextPantrySmallShop);
}

.header {
color: var(--accent12);
background: var(--accent0);
border-color: var(--accent0);
}

hr {
border-color: var(--accent34);
}

.ruledColumn {
   column-rule-color:  var(--accent34);
 }

.shaded {

background: var(--accent0);
}

.box {
border-color: var(--accent12);
background-clip: margin-box;
/* background-color: blue; */
}

.boxPageTitle {
color: var(--accent34);
}

table, th, td {
border-color: var(--accent12);
}

em {
 color: var(--pageTextEm); 
}

.de-em {
  opacity: 34%;
}

.groceries_page em {
color: #d62929;
}

.transcript_text em {
background-color: #f5edff ;
color: #5618a4;
}

.transcript_page_banner {                                       /*  THIS IS FOR MOBILE!!! SET GRADIENT FOR DESKTOP BELOW!!!!!! */
  background-image: var(--transcriptPageBannerGradientMobile);

}



.transcriptScrollToggle {
  color: #c3d1e1;
}


.localOnly {
  color: #b30030;
}

.toggleSectionIndicator {
  color: #b224bf;
}

#toggleControl { 
  opacity : 0%; 
  filter: grayscale(0%);
}


@media (min-device-width: 480px) {

  .transcript_page_banner {                                       /*  SET GRADIENT FOR DESKTOP HERE!!!!! */
    background-image: var(--transcriptPageBannerGradientDesktop);
  }


}