:root {
    --bg-color: #000;
    --article-color: #222;
    --header-color: #333;
    --normal-color: #ddd;
    --bright-color: #fff;
    --link-color: #4af;
    --hover-color: #fff;
    --even-color: #111;
}

@media screen and (prefers-color-scheme: light) {
    :root {
        --bg-color: #fff;
        --article-color: #ccc;
        --header-color: #aaa;
        --normal-color: #333;
        --bright-color: #000;
        --link-color: #45c;
        --hover-color: #000;
        --even-color: #eee;
    }
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: var(--bg-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 13pt;
    color: var(--normal-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

ol, ul { list-style: none; }

table                    { margin: 1em 0em; border-collapse: collapse; display: block; overflow-x: auto; }
table td, table th       { border: solid 0.1em #000; padding: 0.5em 1em; }
table tr:nth-child(even) { background: var(--even-color); }
table th                 { background: var(--header-color); }

a       { 
    color: var(--link-color); 
    transition: color .2s ease-in-out; 
    text-decoration: none;
}
a:hover { color: var(--hover-color); }
a img   { border: 0; }


h1, h2, h3, h4, h5, h6 { color: var(--bright-color); margin: 0; padding: 0; }
h1 { font-size: 1.5em; font-weight: 300; }
h2 { font-size: 1.3em; font-weight: 700; padding: 1.0em 0.0em; }
h3 { font-size: 1.0em; font-weight: 700; padding: 0.4em 0.0em; }

p { margin: 0; padding: 0.3em 0.0em; }

#menu {
    background-color: #222;
    display: block;
    min-height: 2.0em;
}

footer {
    margin-top: auto;
    padding: 0.5em;
    background-color: #222;
    display: block;
    text-align: center;
    color: #fff;
}

@media screen and (min-width: 640px) {
    #social {
        position: absolute;
        top: 0;
        right: 0;
    }
}

nav ul, nav li { padding: 0; margin: 0; display: inline-block; }
nav a {
    transition: all .2s ease-in-out;
    text-decoration: none;
    color: #fff;
    opacity: 0.5;
    vertical-align: middle;
    display: inline-block;
}
nav       a:hover { color: #fff; opacity: 1.0; }
.nav_text a       { border-radius: 1.0em; padding: 0 0.5em; }
.nav_text a:hover { background: #444; }
.nav_icon img     { height: 2.0em; vertical-align: middle; }
.nav_icon         { margin-left: auto; text-align: right; padding: 0 0.5em; }

article {
    border-radius: 8px;
    display: block;
    background-color: var(--article-color);
    margin: 2.0em 5%;
}

article header {
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--header-color);
    padding: 0.0em 1.0em;
    flex-wrap: wrap;
}
article header a {
    text-decoration: underline;
}

article div {
    padding: 1.0em;
}

pre {
    overflow-x: auto;
}

.figure {
    text-align: center;
}

figure {
    max-width: 80%;
    text-align: center;
    border-radius: 8px;
    background-color: var(--bg-color);
    display: inline-block;
    margin: 0.5em;
    padding: 0.2em;
}

figure img {
    max-width: 100%;
    max-height: 100%;
}

figcaption {
    margin: 0;
    padding: 0;
}