@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 + *, h2 + *, h3 + * { margin-top: .5em; }

h1 { font-size: 133%; margin-top: 1.5em; line-height: 1; }
h2 { font-size: 116%; margin-top: 2.5em; line-height: 1.2; }
h3 { font-size: 105%; line-height: 1.26; margin-top: 1.5em; }

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

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

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

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;}
@media print { img, object, table {max-width: 100%; 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;}

@media screen and (min-width: 650px) {
    .side img {
        margin: 0 -10em 0 .75em; max-width: 20em;
        float: right; clear: right;
    }
    .side p + p {
        text-align: left; float: right; clear: right;
        width: 11em; margin: .5em -12.5em 1.5em 0;
    }
}

/* footnotes */

sup { line-height: 80%; }

#footnotes {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.warning {background-color: #a40000;}
.drawer.warning h6 {color: #ef2929;}

/* Table of contents */

#table-of-contents li {margin: .5em;}
#table-of-contents h2 {text-align: center; font-variant: small-caps; font-size: 100%;}

/* 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;}

.margin-note { font-size: 80%; line-height: 1.2; color: #555; }
.margin-note > p:first-child { display: inline; }
#footnotes { 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; }
}

#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;
  filter: brightness(130%) contrast(110%); mix-blend-mode: multiply;
}
#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;
        filter: brightness(110%) contrast(130%);
    }
    #preamble header h2 { float: left; }
    #preamble header h3 { float: right; }
    #preamble { margin-top :.5em; margin-bottom: 1em; overflow: hidden; }
}

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