@media(prefers-color-scheme: light) {
    :root {
    --background-color: #F2E5BC; /* bg0_s */
    --content-background-color: #fbf1c7ea; /* bg0 */
    --sidebar-background-color: #fbf1c7ea;

    /* Text Colors: */
    --text-color: #1D2021; /* fg0 */
    --sidebar-text-color: #1D2021;
    --header-color: #282828;
    --selection-color: #79740E70; /* green */
    --link-color: #076678; /* blue */
    --link-color-hover: #9D0006; /* red */
    --link-color-visited: #8F3F71; /* purple */ /* aqua */
    }
    
    
    
    body {
    max-width: 100%;
    /*background-image: url("/media/starry.png");
    background-repeat: repeat;*/
    color: var(--text-color);
    font-family: "Merriweather";
    font-weight: normal;
    font-size: 18px;
    /* Light: bg0, fg3  https://www.magicpattern.design/tools/css-backgrounds */
    /*background-image: url(/media/lemons.png);*/
    background-color: #FBF1C7;
    opacity: 1;
    background-image:  radial-gradient(#665C54 2px, transparent 2px), radial-gradient(#665C54 2px, #FBF1C7 2px);
    background-size: 90px 90px;
    background-position: 0 0,40px 40px;
    }

}


@media(prefers-color-scheme: dark) {
    :root {
    /*--background-color: #1D2021; /* bg0_h */
    --content-background-color: #1D2021ea; /* bg0 */
    --sidebar-background-color: #1D2021ea;

    /* Text Colors: */
    --text-color: #FBF1C7; /* fg0 */
    --sidebar-text-color: #FBF1C7;
    --header-color: #FBF1C7;
    --selection-color: #B8BB2670; /* green */
    --link-color: #83A598; /* blue */
    --link-color-hover: #FB4934; /* red */
    --link-color-visited: #D3869B; /* purple */
    }
    
    body {
    max-width: 100%;
    /*background-image: url("/media/starry.png");
    background-repeat: repeat;*/
    color: var(--text-color);
    font-family: "Merriweather";
    font-weight: normal;
    font-size: 18px;
    /* Dark: bg0_h, fg3  https://www.magicpattern.design/tools/css-backgrounds */
    /*background-image: url(/media/lemons-dark.png);*/
    background-color: #1D2021;
    opacity: 1;
    background-image:  radial-gradient(#BDAE93 2px, transparent 2px), radial-gradient(#BDAE93 2px, #1D2021 2px);
    background-size: 90px 90px;
    background-position: 0 0,40px 40px;
    }

}


::selection {
    background: var(--selection-color);
}

a {
    text-decoration: underline;
}

a,
a:visited {
    color: var(--link-color-visited);
}

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

a:hover,
a:focus {
    color: var(--link-color-hover);
   
}

header {
    color: var(--header-color);
}

.img-resize { 
    object-fit: contain;
    max-width: 100%;
}

.img-mirror {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
  }

  #headerH1 {
    font-family:'SF Archery Black Oblique';
    font-size: 2.6em;
}

#headerEm {
    font-family: "Spline Sans Mono";
    font-weight: bold;
    font-size: 1.2em
}

#medium {
    font-family: "Merriweather Medium";
}

#serif {
    font-family: "Merriweather Serif";
}

#monospace {
    font-family: "Spline Sans Mono";
}

@font-face {
    font-family: "SF Archery Black Oblique";
    src: url('/fonts/SF_Archery_Black_Oblique.ttf');
    format: ("truetype");
}

@font-face {
    font-family: "Merriweather";
    src: url("/fonts/MerriweatherSans-Regular.ttf");
    format: ("truetype");
    font-weight: normal;
}

@font-face {
    font-family: "Merriweather";
    src: url("/fonts/MerriweatherSans-Italic.ttf");
    format: ("truetype");
    font-style: italic;
}

@font-face {
    font-family: "Merriweather";
    src: url("/fonts/MerriweatherSans-Bold.ttf");
    format: ("truetype");
    font-weight: bold;
}

@font-face {
    font-family: "Merriweather";
    src: url("/fonts/MerriweatherSans-BoldItalic.ttf");
    format: ("truetype");
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "Merriweather Medium";
    src: url("/fonts/MerriweatherSans-Medium.ttf");
    format: ("truetype");
}

@font-face {
    font-family: "Merriweather Medium";
    src: url("/fonts/MerriweatherSans-MediumItalic.ttf");
    format: ("truetype");
    font-style: italic;
}

@font-face {
    font-family: "Merriweather Serif";
    src: url("/fonts/Merriweather_24pt-Regular.ttf");
    format: ("truetype");
}

@font-face {
    font-family: "Merriweather Serif";
    src: url("/fonts/Merriweather_24pt-Italic.ttf");
    format: ("truetype");
    font-style: italic;
}

@font-face {
    font-family: "Merriweather Serif";
    src: url("/fonts/Merriweather_24pt-Bold.ttf");
    format: ("truetype");
    font-weight: bold;
}

@font-face {
    font-family: "Merriweather Serif";
    src: url("/fonts/Merriweather_24pt-BoldItalic.ttf");
    format: ("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Spline Sans Mono";
    src: url("/fonts/SplineSansMono-Regular.ttf");
    format: ("truetype");
}

@font-face {
    font-family: "Spline Sans Mono";
    src: url("/fonts/SplineSansMono-Italic.ttf");
    format: ("truetype");
    font-style: italic;
}

@font-face {
    font-family: "Spline Sans Mono";
    src: url("/fonts/SplineSansMono-Bold.ttf");
    format: ("truetype");
    font-weight: bold;
}

@font-face {
    font-family: "Spline Sans Mono";
    src: url("/fonts/SplineSansMono-BoldItalic.ttf");
    format: ("truetype");
    font-weight: bold;
    font-style: italic;
}

#compatFont {
    font-family: sans-serif;
}