@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400,700&family=IBM+Plex+Mono&family=Ruda:wght@600&display=swap');

html { font-family: 'IBM Plex Serif', serif; font-size: 16px; line-height: 1.4; }
body { max-width: 650px; margin: .5em auto 3em;}

h1, h2, h3 {
    font-family: 'Ruda', sans-serif; letter-spacing: .06ch; font-weight: 600;
    clear: both;
}
h1 {font-size: 20px; line-height: 1; margin: 4em 0 .5em; }
h2 {font-size: 18px; line-height: 1.125; margin: 3em 0 .25em; }
h3 {font-size: 17px; line-height: 1.286; margin: 1.5em 0 .2em; font-weight: 400; }

p, li, dd, blockquote, figcaption, summary {
  text-align: justify; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
  margin: 0 0 1em 0;
}
dd { margin: .5em 0 1em; }

.showcase { background: #ddd; padding: 1em; margin: 4em 0; clear: both;}
.showcase > h2 { margin: 0 0 1em; }
.showcase figcaption {font-size: 15px; line-height: 1.4; margin-top: 1em;}
.showcase img { width: 100%; }
.before-after { font-size: 20px; text-align: center; line-height: 1.5; }
.before-after code { padding: 0 1ex; font-weight: bold; }
.before-after .before { color: #aa2e00; }
.before-after .after { color: #0000e0; }

header {
    line-height: 2; border-bottom: 1px solid #ddd; margin-bottom: 2em;
    display: flex; flex-direction: row; align-items: bottom;
}
header h1 { width: calc(50% - 54px/2); margin: 0; font-size: 125%; line-height: 1.6 }
header img { width: 54px; height: 24px; vertical-align: bottom; padding-bottom: 4px; }
header nav { width: calc(50% - 54px/2); text-align: right; }
header ul { margin: 0; padding: 0; font-weight: bold; }
header li { display: inline-block; margin: 0 .5em; }
header li::before { content: "•"; margin-right: 1em; }
header li:first-child::before { content: none; }

.toc { margin: 2em 0; background: #eee; padding: 1em; }
.toc::before { content: "Table of Contents"; font-size: 110%; font-weight: bold; }
.toc ul { list-style: outside none; padding: 0; }

svg {margin: 0 auto; display: block;}

pre { padding-left: 2em; font-size: 16px; font-family: 'IBM Plex Mono', monospace; }
pre.shell:before { content: "$"; margin-right: 1ex; font-weight: bold; }

div.column-container { display: flex; justify-content: space-around;}
div.column-container h3 { margin: 0 0 1em; }
div.column-container ul { list-style: inside none; margin: 0; padding: 0; }

ul {padding-left: 1em;}
a {color: #2A6496; text-decoration: none}
a:hover {text-decoration: underline; color: #295785}

#formula input { width: 100%; font-size: 125%; }
#errors li { color: #800; }
#progress {
    font-size: 14px; font-family: sans-serif; background-color: #f1f1f1;
    padding-left: 0; overflow: scroll; overflow-y: auto;
}
#num-jobs { font-weight: bold; }

dl { margin: 1em 0; }
dl dd { margin: .5em 1em; }
dl.function-list dt { font-weight: bold; float: left; width: 220px; clear: left; margin-bottom: .5em; }
dl.function-list dd { clear: right; margin: 0; }
dl.function-list dd:after { clear: both; height: 1px; display: block; content: "."; visibility: hidden; margin: 0;}

table.function-list { width: 100%; margin: 1em; }
table.function-list th { text-align: left; }
table.function-list td:nth-child(1) { font-family: monospace; min-width: 170px; margin: 0 1em .5em 1em; }


h2 .badges { color: #2A6496; margin-left: 1ex; float: right; }
.video { display: block; margin: auto; }
.abstract { padding: 1em 3em; position: relative; }
.abstract:before { content: "“"; font-size: 600%; position: absolute; top: 0; left: 0; font-family: serif; color: #ccc; }
.abstract:after { content: "”"; font-size: 600%; position: absolute; bottom: -.5em; right: 0; font-family: serif; color: #ccc; }
.paper-thumb { width: 30%; float: left; margin: 1em; }
.paper-thumb img { width: 100%; border: 1px solid #ccc; }

#news { list-style: none inside; padding: 0; position: relative; }
#news li { margin-bottom: 12px; margin-left: 80px; }
#news time {
    font-weight: bold; text-align: right;
    position: absolute; left: 0;
    display: block; width: 75px;
}
#news time:after { content: ":"; }
#news .yearmark { border: 0; border-top: 1px solid #bbb; margin: 1em 0; width: 90px; }
#news .more {
    color: #2A6496; text-decoration: none; cursor: pointer;
    margin-left: 0; text-align: center;
}
#news .more::before, #news .more::after { content: "⇩"; padding: 1ex; }
#news .more:hover {text-decoration: underline; color: #295785}

body > img { width: 100%; display: block; margin: 2em 0; }

@media (max-width: 600px) {
    body { padding: 1em; margin: 0 auto;}
    .showcase, body > img { margin-left: -1em; margin-right: -1em;}
    body > img { width: calc(100% + 2em); }
}