@import "Iowan.css";
@import "Songti.css";
@import "UbuntuMono.css";
@import "FiraCode.css";

/*@font-face {*/
/*    font-family: "emoji";/
/*    src: url("./fonts/Emoji.ttc");*/
/*}*/

:root {
    --text-fonts: "Iowan", "Songti", "emoji", serif;
    --text-width: 45em;
    --line-height: 1.75em;
    --para-height: 2em;
    --code-fonts: "Fira Code", "emoji", monospace;
    --code-size: .8em;
    --h1-size: 3em;
    --h2-size: 2.4em;
}

.theme-light {
    --backgroud-color: #f2ece3;
    --page-color: #f7f3ee;
    --text-color: #4a341c;
    --bold-color: #df453a;
    --italic-color: #2882c3;
    --highlight-color: #f9e7be;
    --h1-color: #bf3f36;
    --h2-color: #ea702e;
    --h3-color: ;
    --h4-color: ;
    --split-color: #E4D7C4;
}

body {
    background: var(--backgroud-color);
}

.markdown {
    background: var(--page-color);
    color: var(--text-color);
    line-height: var(--line-height);
    padding: var(--para-height);
    font-family: var(--text-fonts);
    width: var(--text-width);
    margin: auto;
}

/* Header */

.markdown h1 h2 h3 h4 p b strong i em{
    font-family: var(--text-fonts);
}

.markdown h1 {
    text-align: center;
    color: var(--h1-color);
    font-size: var(--h1-size);
}

.markdown h2 {
    color: var(--h2-color);
    font-size: var(--h2-size);
}

.markdown b, strong {
    color: var(--bold-color);
}

.markdown i, em {
    color: var(--italic-color);
}

.markdown highlight {
    background: var(--highlight-color);
    border-radius: 5px;
}

.markdown code {
    font-family: var(--code-fonts);
    font-size: var(--code-size);
}

.markdown hr {
    border-color: var(--split-color);
}