@font-face { font-family: main; font-display: swap; src: url('/font/OpenSans-Regular.ttf'); }
@font-face { font-family: main; font-display: swap; src: url('/font/OpenSans-Bold.ttf'); font-weight: bold; }
@font-face { font-family: main; font-display: swap; src: url('/font/OpenSans-Italic.ttf'); font-style: italic; }
@font-face { font-family: main; font-display: swap; src: url('/font/OpenSans-BoldItalic.ttf'); font-weight: bold; font-style: italic; }

html,body {
    color: #d8d8d8;
    background-color: #181818;
    font-size: 18px;
    font-family: main, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background-color: #282828;
    text-align: center;
    font-size: 20px;
    padding: 5px 0;
}
header > div {
    display: inline-block;
    width: 19%;
    max-width: 160px;
}
header img { vertical-align: middle; }

div#subheader {
    background-color: #2c2c2c;
    border-top: 1px solid #202020;
    text-align: center;
    font-size: 16px;
    color: #666;
}
div#subheader > span {
    display: inline-block;
    border-top: 1px solid #202020;
    border-bottom: 1px solid #202020;
    margin-top: -1px;
    padding: 3px 20px;
}
div#subheader-post {
    border-top: 1px solid #181818;
    margin-top: -1px;
    position: relative;
}
div#subheader a svg {
    width: 1em;
    vertical-align: middle;
    margin: 0 0.2em;
    transition: width 0.2s, margin 0.2s;
}
div#subheader a:hover svg { width: 1.2em; margin: 0 0.1em; }

header a, header a:visited, div#subheader a, div#subheader a:visited {
    text-decoration: none;
    color: #999;
    -webkit-transition: color 0.2s;
       -moz-transition: color 0.2s;
         -o-transition: color 0.2s;
            transition: color 0.2s;
}
header a:hover, div#subheader a:hover { color: #fff; }
header a.active, div#subheader a.active { color: #dc9656; }
header a.active:hover, div#subheader a.active:hover { color: #fcc696; }

.subsec { color: #a1b56c; }

h2.subsec:not(:first-child) {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px dotted #585858;
}

h3.subsec, h4.subsec, h5.subsec, h6.subsec {
    margin-top: 3em;
}

.secicon .secfill   { fill: #b8b8b8; transition: fill 0.2s; }
.secicon .secstroke { stroke: #b8b8b8; transition: stroke 0.2s; }
.secicon .secfill.secstroke { transition: fill 0.2s, stroke 0.2s; }
.secicon:hover .secfill   { fill: #fff; }
.secicon:hover .secstroke { stroke: #fff; }
.secicon.active .secfill   { fill: #dc9656; }
.secicon.active .secstroke { stroke: #dc9656; }
.secicon.active:hover .secfill   { fill: #fcc696; }
.secicon.active:hover .secstroke { stroke: #fcc696; }

/* blog stuff */
span.tag {
    background-color: #282828;
    border-radius: 5px;
    padding: 2px 6px;
    margin: 0 4px;
}
a.tag, a.tag:visited {
    color: #d8d8d8;
    text-decoration: none;
}
div.hsub {
    font-size: 16px;
}

/* special.rb */
div.chess { margin: 1em 0; }
div.chess table { border-collapse: collapse; float: left; }
div.chess td { padding: 0; margin: 0; }
div.chess td.l { background-color: #aaa; }
div.chess td.d { background-color: #888; }
div.chess td img { display: block; width: 45px; height: 45px; }
div.chess div.mcont { padding: 10px; min-width: 200px; overflow: hidden; background-color: #202020; }
div.chess div.mcont div.ctrl > span > span { padding: 0 10px; }
div.chess div.mcont div.ctrl { margin-bottom: 0.5em; }
div.chess div.mcont div.ctrl > span {
    display: inline-block;
    font-size: 15px;
    height: 25px;
    line-height: 25px;
    min-width: 25px;
    text-align: center;
    margin: 0 5px;
    background-color: #303030;
    border-radius: 25px;
    cursor: pointer;
}
div.chess div.moves span.n { color: #888; font-size: 16px; }
div.chess div.moves span.c { color: #bbb; font-size: 16px; font-style: italic; }
div.chess div.moves span.m { font-weight: bold; font-family: monospace; cursor: pointer; }
div.chess div.moves span.m.active { background-color: #888; color: #000; }
div.chess div.moves div.b { padding-left: 1em; text-indent: -0.5em; border-left: 1px solid #333; }
div.chesspopup { position: absolute; border: 1px solid #000; }
div.chesspopup div.opt { font-size: 15px; font-family: monospace; padding: 2px 5px; cursor: pointer; }
div.chesspopup div.opt.even { background-color: #333; }
div.chesspopup div.opt.odd { background-color: #444; }

/* 600 = 45*8 + 200 + 10*2 + 10*2;  340 = 45*8 - 10*2 */
/* the 300px height is a guess; it gets adjusted via JS */
@media (min-width: 600px) { div.chess div.mcont { height: 340px; } div.chess div.moves { height: 300px; overflow-y: auto; } }
/* 390 = 45*8 + 10*3;  350 = 40*8 + 10*3 */
@media (max-width: 390px) { div.chess td img { width: 40px; height: 40px; } }
@media (max-width: 350px) { div.chess td img { width: 35px; height: 35px; } }

main {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 10px;
}

p { margin: 1em 0; }
/* .pind p { text-indent: 1em; } */
/* .pind li > p, .pind p.ni { text-indent: 0; } */

h1 { font-size: 26px; line-height: 1.4; margin: 0; }
h2 { font-size: 23px; line-height: 1.4; margin: 0; }
h3 { font-size: 20px; line-height: 1.4; margin: 0; }
.hline { text-align: center; overflow: hidden; }
.hline:before { right: 0.5em; margin-left:  -50%; }
.hline:after  { left:  0.5em; margin-right: -50%; }
.hline:before, .hline:after {
    background-color: #585858;
    display: inline-block;
    content: '';
    height: 1px;
    width: 50%;
    position: relative;
    vertical-align: middle;
}

blockquote { border-left: 5px solid #444; padding-left: 1em; margin-left: 0; }
hr { border: none; border-bottom: 1px solid #444; }
ul, ol { padding: 0; padding-left: 1em; margin: 1em 0; }
li { padding: 0; margin: 1em 0; }
ul.small li, ol.small li { margin: 0; }
ul.selfsm, ol.selfsm { margin: 0; }

a { color: #7cafc2; }
a:visited { color: #ba8baf; }