@font-face {
  font-family: JetBrainsMono; /* set name */
  src: url(/assets/fonts/JetBrainsMono-Regular.ttf); /* url of the font */
}

@view-transition {
  navigation: auto;
}

:root{ 
    --fg: 	#F8F8F2;
    --bg: 	#282A36;
    --bg2: 	#44475A;
    --lfg: #1F1F1F;
    --lbg: #FFFBEB;
    --lbg2: #CFCFDE;
    --accent: 	#8BE9FD;
    --laccent: #036A96;

    --h1: #BD93F9;
    --h2: #FFB86C;
    --h3: #50FA7B;
    --h4: #FF79C6;
}

@media (prefers-color-scheme:dark) {
    html, body {
        background-color: var(--bg);
        color: var(--fg);
        width: 90%;
        margin: auto;
        font-family: JetBrainsMono;
    }

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

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

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

    a {
        color: var(--accent)
    }

    footer {
        text-align: center;
        margin: auto;
        border-top: 2px solid var(--fg)
    }

    blockquote {
        border-left: 2px solid var(--fg);
        padding-left: 5px;
    }

    .front-matter {
        background-color: var(--bg2);
        border-radius: 15px;
        padding: 10px;
        max-width: 100%;
        overflow-wrap: break-word;
        hyphens: manual;
    }

    img {
        max-width: 100%;
    }
}

@media (prefers-color-scheme:light) {
    html, body {
        background-color: var(--lbg);
        color: var(--lfg);
        width: 90%;
        margin: auto;
        font-family: JetBrainsMono;
    }

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

    footer {
        text-align: center;
        margin: auto;
        border-top: 2px solid var(--lfg);
    }

    blockquote {
        border-left: 2px solid var(--lfg);
        padding-left: 5px;
    }

    .front-matter {
        background-color: var(--lbg2);
        border-radius: 15px;
        padding: 10px;
        max-width: 100%;
        overflow-wrap: break-word;
        hyphens: manual;       
    }

    img {
        max-width: 100%;
    }
}