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

    /* Text Colors: */
    --text-color: #282828; /* fg0 */
    --sidebar-text-color: #282828;
    --header-color: #282828;
    --selection-color: #98981a70; /* green */
    --link-color: #B16286; /* purple */
    --link-color-hover: #D65D0E; /* orange */
    --link-color-visited: #689D6A; /* aqua */
    }
    
    
    
    body {
    max-width: 100%;
    /*background-image: url("/media/starry.png");
    background-repeat: repeat;*/
    color: var(--text-color);
    font-family: "IBM Plex";
    font-weight: normal;
    font-size: 20px;
    /* Light: bg0, fg3  https://www.magicpattern.design/tools/css-backgrounds */
    background-color: #FBF1C7;
    opacity: 1;
    background-image:  radial-gradient(#665C54 2px, transparent 2px), radial-gradient(#665C54 2px, #FBF1C7 2px);
    background-size: 80px 80px;
    background-position: 0 0,40px 40px;
    }

}


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

    /* Text Colors: */
    --text-color: #FBF1C7; /* fg0 */
    --sidebar-text-color: #FBF1C7;
    --header-color: #FBF1C7;
    --selection-color: #98981a70; /* green */
    --link-color: #B16286; /* purple */
    --link-color-hover: #D65D0E; /* orange */
    --link-color-visited: #689D6A; /* aqua */
    }
    
    body {
    max-width: 100%;
    /*background-image: url("/media/starry.png");
    background-repeat: repeat;*/
    color: var(--text-color);
    font-family: "IBM Plex";
    font-weight: normal;
    font-size: 20px;
    /* Dark: bg0_h, fg3  https://www.magicpattern.design/tools/css-backgrounds */
    background-color: #1D2021;
    opacity: 1;
    background-image:  radial-gradient(#BDAE93 2px, transparent 2px), radial-gradient(#BDAE93 2px, #1D2021 2px);
    background-size: 80px 80px;
    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: "IBM Plex Monospace";
    font-weight: bold;
    font-size: 1.2em
}

#medium {
    font-family: "IBM Plex Medium";
}

#serif {
    font-family: "IBM Plex Serif";
}

#monospace {
    font-family: "IBM Plex Monospace";
}


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

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

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

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

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

@font-face {
    font-family: "IBM Plex Monospace";
    src: url("/fonts/IBMPlexMono-Regular.ttf");
    format: ("truetype");
}

@font-face {
    font-family: "IBM Plex Monospace";
    src: url("/fonts/IBMPlexMono-Bold.ttf");
    format: ("truetype");
    font-weight: bold;
}

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