/* Fonts */
html,body {
    font: 16px/1.4 sans-serif;
    line-height: 1.5em;
    margin:0;
    padding:0;
}
pre, pre code {
    line-height: 1em;
    font-size: .8em;
}
img { width: 100%; }
label {color:#b56;}
label:hover { cursor:pointer; }
#content,.content {
    max-width: 48em;
    padding: 0 1em;
    margin: 0 auto;
}
pre {
    border: dashed 1px;
    padding: 1ex;
    max-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
body > input {
    display:none;
}
.main {
    padding-top: 1em;
    min-height:calc(100vh - 2.5em);
}
:root {
    --b2: #fff;
    --b3: #fffa;
    --y:  #ca2;
    --o:  #a65;
    --r:  #b56;}
/* --------------------------------------------------------------------------- */
/* Default color theme */
/* colors theme */
/* Dark themes soften and darken images */
@media (prefers-color-scheme: dark) {
    body {
        background: #000;
        color: #bbb;
    }
    a { color: #8cf }
    a:visited { color: #fcf }
    img {
        filter: brightness(0.8);
    }
}

/* Manually checked colortheme */
#d:checked ~ * {
    background: #000;
    color: #bbb;
}
#d:checked ~ * a { color: #8cf; }
#d:checked ~ * a:visited { color: #fcf; }

/* --------------------------------------------------------------------------- */
/* Light theme selected */
#l:checked ~ * {
    background: #FFF;
    color: #333;
}