body {
    max-width: 700px;
    margin: auto;
    padding: 1em;
    line-height: 1.5;
    background: #111318;
    color: #c9cdd8;
    font-family: Calibri, Arial, sans-serif;
}

/* header and footer areas */
.menu { padding: 0; }
.menu li { display: inline-block; }

.post-title,
.menu a {
    text-decoration: none;
    color: #7a82a0;
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
    font-size: 0.95em;
    letter-spacing: 0.04em;
    transition: color 0.2s, border-color 0.2s;
}

.menu li + li::before { content: '·'; color: #2a3048; margin: 0 4px; }
.menu a:hover { color: #5da8d4; border-bottom-color: #5da8d4; }
.menu, .post-title, footer { text-align: center; }
.title { font-size: 1.1em; }
footer a { color: #5da8d4; }
hr { border: none; border-top: 1px solid #2a3048; }

pre {
    border: 1px solid #2a3048;
    border-left: 3px solid #5da8d4;
    box-shadow: 5px 5px 5px #0a0b0e;
    padding: 1em;
    overflow-x: auto;
    background: #0d0f14;
}
code { background: #1a1d27; font-family: Monaco, monospace; }
pre code { background: none; }

a { color: #5da8d4; text-decoration-color: #3a7a9e; }
a:hover { text-decoration-color: #5da8d4; }
img, iframe, video { max-width: 100%; }
main { hyphens: auto; }

blockquote {
    background: #1a1d27;
    border-left: 4px solid #5da8d4;
    padding: 3px 1em;
    color: #8890aa;
    font-style: italic;
}

table { margin: auto; border-top: 1px solid #5da8d4; border-bottom: 1px solid #5da8d4; }
table thead th { border-bottom: 1px solid #2a3048; color: #5da8d4; }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: #1a1d27; }