:root{
    --toggle-size: 32px; /*size of toggle switches */
    --color0: hsl(282, 100%, 5%);
    --color1: hsl(282, 100%, 15%);
    --color2: hsl(282, 100%, 25%);
    --color3: hsl(282, 100%, 41%);/*darkviolet CSS standard*/
    --color4: hsl(282, 100%, 60%);
    --color5: hsl(278, 100%, 80%);
    --color6: hsl(278, 100%, 90%);
    --color-gray1: slategray;
    --color-gray1-light: lightslategray;
    --color-gray2: gray;
    --color-gray2-light: lightgray;
    --color-remark: hsl(0, 0%, 33%);
    --color-body-background: #DCE0E4;
    --color-paper-background: white;
    --color-background-dark: hsla(240, 20%, 17%,1);
    --color-background-90: hsla(0, 0%, 100%, 0.85);
    --filter-to-color4: invert(14%) sepia(56%) saturate(6127%) hue-rotate(279deg) brightness(68%) contrast(123%);
    --filter-to-color5: invert(75%) sepia(23%) saturate(3687%) hue-rotate(206deg) brightness(100%) contrast(99%);
    --filter1: var(--filter-to-color4); /* make small picks on TOC purple*/
    --filter2: none; /* x-close button*/
    --dark-text: var(--color1);
    --emph-text: var(--color6);
    --emph-background: var(--color1);
    --color-off: var(--color-gray1);
    --color-on: var(--color3);
    --black-transparent: hsla(0, 0%, 0%, 0.1);
    --pill-outline: var(--color2);
    --button-size: 1.5rem;
    --toc-width: 18.75rem;
    --marker-right: 0px;
    --marker-top: -3px;
    --marker-width: 40px;
    --marker-height: 36px;
}
@media only screen and (max-width: 640px){
    :root{
        --toc-width: 100vw;
    }
}