:root{
    --navBarHeight: 50px;
    --footerHeight: 80px;
    --shadow:       0px 0px 8px var(--clrAccent2);
    --clrAccent1:   #00DDFF;
}



:root, :root:has(#theme [value="light"]:checked){ /* LIGHT THEME */
    --background:   url("../images/herringbone.png");
    --quoteMark:    url("../images/quotationMark.png");
    --clrAccent2:   lightgray;
    --clrText:      #000;
    --clrText2:     #fff;
    --clrBG:        #fff;
    --clrBGTp:      rgba(255,255,255,.85);
    --stroke:       0px 0px 1px black,
                    0px 0px 1px black,
                    0px 0px 1px black,
                    0px 0px 1px black,
                    0px 0px 1px black,
                    0px 0px 1px black;
}
@media (prefers-color-scheme: dark){
:root{ /* LIGHT THEME */
    --background:   url("../images/herringboneDark.png");
    --quoteMark:    url("../images/quotationMarkDark.png");
    --clrAccent2:   black;
    --clrText:      #fff;
    --clrText2:     #000;
    --clrBG:        #333;
    --clrBGTp:      rgba(51,51,51,.85);
    --stroke:       none;

}
}

:root:has(#theme [value="dark"]:checked){
    color-scheme: dark;
    --background:   url("../images/herringboneDark.png");
    --quoteMark:    url("../images/quotationMarkDark.png");
    --clrAccent2:   black;
    --clrText:      #fff;
    --clrText2:     #000;
    --clrBG:        #333;
    --clrBGTp:      rgba(51,51,51,.85);
    --stroke:       none;
}