/* Fonts */
html,body {
    font-family: Menlo, monaco, monospace;
    line-height: 1.5em;
}
img { width: 100%; }
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:  #da2;
    --o:  #d72;
    --r:  #c33;}
/* --------------------------------------------------------------------------- */
/* Default color theme */
/* colors theme */
/* Dark themes soften and darken images */
@media (prefers-color-scheme: dark) {
    body {
        background: #000;
        color: #ddd;
    }
    a { color: #38c }
    a:visited { color: #83c }
    img {
        filter: brightness(0.8);
    }
}

/* Manually checked colortheme */
#d:checked ~ * {
    background: #000;
    color: #ddd;
}
#d:checked ~ * a { color: #38c; }
#d:checked ~ * a:visited { color: #83c; }

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