@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400|Open+Sans:300,400');

html { margin: 0; padding: 0; background: #f6f6f6; color: #2e3436; }

body {
    padding: 0 10px 5em; max-width: 35em; margin: 0 auto; line-height: 1.5;
    font-weight: 200; font-size: 22px; font-family: "Merriweather", serif;
    text-rendering: optimizeLegibility;
}

/* Content */

h1, h2, h3 {
    font-family: "Open Sans", "Deja Vu Sans", "Georgia", sans;
    color: #555753; font-weight: 400; margin-bottom: 0em;
}

h1 { font-size: 133%; margin: 1.5em 0 .5em; line-height: 1.12; }
h2 { font-size: 125%; margin: 1.9em 0 .5em; line-height: 1.20; }
h3 { font-size: 110%; margin: 1.5em 0 .5em; line-height: 1.36; }

b, strong { font-weight: 700; color: #555753; }

li, p, dd, blockquote {
    text-align: justify; margin: 0 0 1.5em 0;
    -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
}

@media screen and (max-width: 400px) {
    li, p, dd, blockquote { text-align: left; }
}

p + ul { margin-top: -1em; }
ul, ol { padding-left: 1.2em; margin-top: .5em; }
ol ol { list-style-type: lower-latin; }
blockquote { margin: 1.2em 1.5em; }
dt { font-weight: normal; }

a {color: #204a87;}
a:hover {color: #3465a4;}

pre { padding: .5em; overflow: auto; margin: 1.2em 0 1.7em; }
pre, code {
    font-family: "Open Sans", "Inconsolata", "Deja Vu Sans Mono", monospace;
    white-space: pre; font-weight: 400; font-size: 108%; line-height: 111%;
    color: #444; /* To match font size and color */
}

/* Figures */

img, object, table {margin: 1.5em auto; max-width: 100%; }
@media print { img, object, table { margin: 0;} }
.figure {margin: 1.5em auto;} 
.figure p {text-align: center; font-size: 80%; line-height: 1.286; margin: 0;}
.figure img, .figure svg {margin-bottom: .5em; }
iframe {height: 600px; width: 100%; border: 1px solid #2e3436;}

/* Footnotes */

a.footref { text-decoration: none; line-height: 80%; }

#footnotes { display: none; }
.margin-note { font-size: 80%; line-height: 1.2; color: #555; }
.margin-note > p:first-child { display: inline; }
.rss-only { display: none; }

@media screen and (max-width: 650px) {
    .margin-note { margin: .5em; font-size: 100%; }
    .margin-note:before { content: "["; }
    .margin-note:after { content: "]"; }
}

@media screen and (min-width: 651px) {
    body { max-width: 45em; }
    body > div { margin-right: 10em; }
    .margin-note {
        display: block; float: right; clear: right;
        margin: 0 -12.5em 1.5em 0; width: 11em;
        text-align: left;
    }
}

@media print {
    .margin-note { display: none !important; }
    #footnotes { display: block; margin-top: 4.5em; }
    #footnotes p { font-size: 80%; line-height: 1.142; }
    .footdef sup {float: left; margin: 0 1em;}
}

/* Drawers */

.drawer { padding: 20px; margin: 1em 0; background-color: #5c3566; color: #eeeeec; }
.drawer a {color: #729fcf;}
.drawer h6 { color: #ad7af8; font-size: 100%; font-weight: bold; margin: 0 0 1em 0; }
.drawer *:last-child { margin-bottom: 0; }
.drawer pre, .drawer code { color: #d8d8d0; }

.drawer.warning {background-color: #a40000;}
.drawer.warning h6 {color: #ef2929;}

/* Series Drawers */

.drawer.series {
    background: #eeeeec; color: #2e3436;
    padding-right: calc(144px); position: relative;
}
.drawer.series h6 { display: none; }
.drawer.series a { color: #204a87; }
.drawer.series a:hover { color: #3465a4; }
.drawer.series p { margin-bottom: 0; }
.drawer.series a.next, .drawer.series a.previous {
    position: absolute; height: 100%; width: 60px;
    font-size: 225%; top: 0; text-align: center;
    border-left: 2px solid #f6f6f6;
}
.drawer.series a.next:hover, .drawer.series a.previous:hover { background-color: #d8d8d0; }
.drawer.series a.next { right: 0; }
.drawer.series a.previous { right: 60px; border-right: 2px solid #f6f6f6; }
.drawer.series a.next, .drawer.series a.previous { text-decoration: none; }

/* Table of contents */

#table-of-contents ul { margin: 0; }
#table-of-contents li { margin: .25em; font-size: 90%; }
#table-of-contents h2 { font-size: 100%; font-variant: small-caps; }

/* Print Style */

@media print {
    body {
        font-size: 9pt; margin: 0; max-width: none; width: auto;
        column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;
        widows: 3;
    }
    
    pre { margin: 6pt 0 6pt 0; font-size: 8pt; padding: 0 6pt;}
    p, li, dd { margin: 6pt 0; }
    blockquote { margin: 6pt; }

    h2 {font-size: 116%; margin-top: 1.5em; line-height: 1.2;}
    h3 {font-size: 105%; line-height: 1.26; margin-top: 1em;}
    
    h1, #table-of-contents { column-span: all; -webkit-column-span: 2; text-align: center; margin: 2em 0 2em;}

    .drawer { border: 1pt solid #2e3436; padding: 3pt; }
    .drawer h6, .drawer p { color: black; display: inline; }
    
    #table-of-contents { background: transparent; }
    #table-of-contents li {margin: 0;}
    #table-of-contents a {text-decoration: none;}
    
    a {text-decoration: none; color: black;}
    /*a:after {content: " 〈" attr(href) "〉"; font-size: 90%; }*/
    a[href="mailto:me@pavpanchekha.com"]:after {content: " 〈me@pavpanchekha.com〉"}
    #table-of-contents a:after, a.no-printable-link:after,
    a.footref:after, a.footnum:after,
    .posts a:after, #postamble a:after {content: none;}
    
    #postamble p:after {
        content: " Originally published on 〈https://pavpanchekha.com〉";
    }
    
    #MathJax_Message, #taglist, svg button {display: none;}
}

/* SVG */

path { stroke: black; stroke-width: 2; fill: none; }
svg {margin: 1.5em auto; display: block;}
svg button {position: absolute; right: 0; bottom: 0;}
svg .plot {display: none; margin: 1em;}
svg .plot thead {font-size: 110%; color: #888a85;}
svg .plot em {font-variant: small-caps; font-style: normal;}
svg .plot th {padding-right: 1em; font-style: italic;}

/* Sidebar */

#preamble { font-size: 80%; width: 11em; margin: 0 0 3em; float: right; }
#preamble header img {
  max-width: none; width: 11em; border-radius: 5.5em; margin: 0 0 1em;
}
#preamble header h2, #preamble header h3 {
    font-weight: 200; font-size: 100%; font-family: "Merriweather", serif;
    text-rendering: optimizeLegibility; line-height: 1.5em; margin: 0;
}
#preamble ul { list-style: none outside; padding-left: 0; margin: .5em 0; }
#preamble ul li { margin: .3em 0 .3em 0; }
#preamble ul li:after { content: "»"; margin-left: 1ex; }
#preamble .license { font-size: 75%; line-height: 1.2; margin-top: 1em 0 .5em; }
#preamble .disclaimer { font-size: 75%; line-height: 1.2; color: #555; margin: .5em 0; }

@media screen and (max-width: 650px) {
    #preamble ul, #preamble .license, #preamble .disclaimer { display: none; }
    #preamble { float: none; width: 100%; }
    #preamble header img {
        height: 1.5em; width: 1.5em; margin: 0 1em 0 0; float: left;
    }
    #preamble header h2 { float: left; }
    #preamble header h3 { float: right; }
    #preamble { margin-top :.5em; margin-bottom: 1em; overflow: hidden; }
}

@media print {
    #preamble { display: none; }
}