@font-face {
    font-family: 'custom_title';
    src: url('fonts/robotronfontpica.woff');
    font-display: block;
}
@font-face {
    font-family: 'custom_subtitle';
    src:url('fonts/robotronfontelit.woff');
    font-display: block;
}
@font-face {
    font-family:'custom_mono';
    src:url('fonts/300.woff');
    font-display:block;
}
@font-face {
    font-family:'custom_mono_bold';
    src:url('fonts/700.woff');
    font-display:block;
}

:root {
    --solid-fill-color: #ef0;
    --background-color: #fbfbfb;
    --accent-color:#3a0;
    --text-accent-color:#555;
    --text-color:black;
}

body { 
    font-family:custom_mono,monospace; font-size:16px; line-height:1.7; max-width:100ch; margin:auto; text-align:left; 
    background-image: url("img_common/bn_light.png"); background-color:var(--background-color); color:var(--text-color); 
}

a { color:var(--accent-color); text-decoration-thickness:1px; text-decoration-color:var(--accent-color); }
b { font-family:custom_mono_bold; font-weight:normal; color:var(--text-accent-color) } /* the font iself is bold*/
img { height:auto; max-width:100%; border-radius:8px }
.img_dark { display:none } /* do not display img_dark class in normal mode... */
hr { border-top: thick dotted var(--solid-fill-color); border-bottom:none; border-left:none; border-right:none }

#title { 
    font-family:custom_title,monospace; font-size:2.5em; background-color: var(--solid-fill-color);
    text-align:center; margin:24px 0px; padding-top: 1.5ch; padding-bottom: 1.5ch; border-radius:24px;
}
#subtitle { font-family:custom_subtitle,monospace; font-size:0.5em; padding-top: 0.5ch;}

/* Note: main_text alternative, justify+break words, but I didn't love it -> text-align:justify; text-justify:inter-character; word-wrap:break-word; hyphens:auto; */
/* border-color:var(--solid-fill-color); border-width: 10px; border-style:dashed; */
#main_text { background-color:var(--background-color); padding-left:2ch; padding-right:2ch;
    padding-top:0.5ch; padding-bottom:0.5ch; border-radius:24px; margin-bottom:2ch;
    border-color: var(--solid-fill-color); border-style: dotted; border-width: thick;
} /* Posts content is under a div */

#navbar { border:none; width:100%; height:4ch; position:sticky; top:8px; border-radius:12px; }
#navbar_body { text-align: center; background-color: var(--solid-fill-color); background-image:none; font-size:1.25em;}

/* Night mode overrides -> https://huemint.com/website-2/ not bad tool */
@media (prefers-color-scheme: dark) {
    .img_dark { display:initial } 
    .img_light { display:none }
    body { background-image: url("img_common/bn_dark.png"); }
    :root {
        --accent-color:#f65233;
        --solid-fill-color:#0c1d24;
        --background-color: #131212;
        --text-accent-color:#fcbe2b;
        --text-color:#ffe9b5;
    }
}

/* Mobile overrides - Note: I used to use @media (pointer:none) or (pointer:coarse) or (hover:none) but that catches tablets too, in the end, it's best to just react to max-width  */
@media only screen and (max-width: 110ch) {
    body { font-size:14px; line-height:1.6; } /* line spacing needs to be bigger when the line width is longer, and vice-versa */
    #title { font-size:1.5em; } 
    img { max-width: 50%; }
}
@media only screen and (max-width: 80ch) {
    body { font-size:12px; line-height:1.5; }
}