@import url('https://fonts.googleapis.com/css2?family=Cascadia+Mono:ital,wght@0,200..700;1,200..700&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


@font-face {
    font-family: 'Cascadia Mono';
    src: url('/fonts/SpaceMono-Regular-Variable.ttf') format('truetype');
}

@font-face {
    font-family: "EB Garamond Foreground";
    src: url(/static/fonts/EBGaramond-InitialsF2.otf) format('opentype');
}

@font-face {
    font-family: "Instrument Serif";
    src: url(/static/fonts/InstrumentSerif-Regular.ttf) format('opentype');
}
@font-face {
    font-family: "Instrument Serif Italic";
    src: url(/static/fonts/InstrumentSerif-Italic.ttf) format('opentype');
}


@font-face {
    font-family: "EB Garamond Background";
    src: url(/static/fonts/EBGaramond-InitialsF1.otf) format('opentype');
}

@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');
.forum-regular {
    font-family: "Forum", serif;
    font-weight: 400;
    font-style: normal;
}

/* Garamond */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

/* Playfair */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    /*
    --background-color: #d9e4ec;
    --color: #385e72;*/

    --serif-font: 'Spectral', serif;
    --drop-cap-font: "EB Garamond Foreground", sans-serif;
    --drop-cap-background-font: "EB Garamond Background", sans-serif;
    --sans-font: 'Helmet Neue', 'Helvetica', sans-serif;
    --mono-font: 'Cascadia Mono', 'Courier', monospace;
    --nav-font: 'Helmet', 'Helvetica', sans-serif;
    --header-font: 'Playfair Display';

    /* Light Mode Theme:*/
    --dark-text-color: rgb(148, 148, 148);
    --nice-div-color: rgb(249, 247, 246);
    --bullet-color: rgb(184, 184, 184);
    --bullet-indent-color: #f0f0f0;
    /*--link-background-color: rgba(221, 188, 187, 0.376);*/
    /* old color: --link-color: rgb(227, 86, 82);*/
    /*--link-color: rgb(113, 113, 113);*/
    --link-color: #52525b;
    --link-underline-color: #7e7e86;
    --link-background-color: #9191a07f;
    --background-color: white;
    --subtle-background-darker: rgb(252, 248, 243);
    --less-subtle-background-darker: rgb(250, 250, 250);
    --border-background-color: #e0e0e0;
    --code-foreground-color: rgb(84, 18, 1);
    --code-background-color: rgb(245,245,245);
    --table-border-color: rgb(236, 236, 236);
    --color: black;
    --hr-color: black;
    --gradient-bottom: #f0f0f0;
    --gradient-top: var(--background-color);


    --main-font-size: 14pt;
    --code-font-size: 12pt; /* also used for index tags font size */
    --main-font-size-mobile: 13pt;
    --code-font-size-mobile: 11pt;

}

/* Tan Color Scheme
(to be used when I add theme functionality

:root { 
    --background-color: #faf9f3;
    --border-background-color: #eeebd7;
    --code-background-color: #f5f4e9;
    --link-background-color: #ebe9d3;
    --link-underline-color: #dbd3a8;
    --color: black;
}*/

.light-mode-hidden {
    display:none;
}

/*Dark mode theme (based on system preference */

@media (prefers-color-scheme: dark) {
    :root {
        --dark-text-color: #949494;
        --nice-div-color: rgb(30, 30, 30);
        --bullet-color: rgb(90,90,90);
        --bullet-indent-color: #333333;
        --background-color: #121212;
        --subtle-background-darker: rgb(23, 23, 23);
        --less-subtle-background-darker: rgb(24, 24, 24);
        --border-background-color: #3b3d3e;
        --code-foreground-color: rgb(233, 92, 56);
        --code-background-color: #242424;
        --link-background-color: #6b6b6b; 
        --link-underline-color: #5e5e5e;
        --link-color: rgb(161, 161, 161);
        --color: rgb(200,200,200);
        --hr-color: dimgray;
        --gradient-bottom: #1e1e1e;
        --gradient-top: var(--background-color);
    }    

    .dark-mode-hidden {
        display:none;
    }

    .light-mode-hidden {
        display:inherit;
    }

    img {
        filter: brightness(.8) contrast(1.2);
    }
}