1@font-face {
  2    font-family: "Merriweather";
  3    src: url("/css/fonts/Merriweather-Regular.otf") format("opentype");
  4}
  5@font-face {
  6    font-family: "Merriweather";
  7    font-weight: bold;
  8    src: url("/css/fonts/Merriweather-Bold.otf") format("opentype");
  9}
 10@font-face {
 11    font-family: "Merriweather";
 12    font-weight: bold;
 13    font-style: italic;
 14    src: url("/css/fonts/Merriweather-BoldItalic.otf") format("opentype");
 15}
 16@font-face {
 17    font-family: "Merriweather";
 18    font-style: italic;
 19    src: url("/css/fonts/Merriweather-Italic.otf") format("opentype");
 20}
 21@font-face {
 22    font-family: "Merriweather";
 23    font-weight: lighter;
 24    font-style: italic;
 25    src: url("/css/fonts/Merriweather-LightItalic.otf") format("opentype");
 26}
 27@font-face {
 28    font-family: "Merriweather";
 29    font-weight: lighter;
 30    src: url("/css/fonts/Merriweather-Light.otf") format("opentype");
 31}
 32
 33html{
 34    margin: 1rem 2rem;
 35    font-size: 106.25%;
 36    --body-vertical-margin: 1rem;
 37    --body-horizontal-margin: 1rem;
 38    --content-box-padding: 0.5rem;
 39    --font-main: Georgia, sans-serif;
 40    --font-mono: 'Ubuntu Mono','Fira Code','Deja Vu Sans Mono','Bitstream Vera Sans Mono','Source Code Pro','Courier New',monospace;
 41    --font-quote: "Fresco", Georgia, serif;
 42    --font-sans: Avenir Next, Avenir, system-ui, sans-serif;
 43    --font-header: 'Merriweather','Linux Libertine','Georgia','Times',serif;
 44    --figure-offset: 0;
 45    --figcaption-padding: 0;
 46    --aside-width: 12.5rem;
 47    --column-gap: 2rem;
 48    --padding: 1rem;
 49}
 50
 51body {
 52    font-family: var(--font-main);
 53    max-width: 70rem;
 54    min-width: 30rem;
 55    line-height: 1.4rem;
 56    margin: 0 auto;
 57}
 58
 59p {
 60    word-wrap: break-word;
 61}
 62body > header{
 63    margin-bottom: 4em;
 64}
 65
 66body > header nav {
 67    float:right;
 68}
 69
 70body > header nav ul li {
 71    display: inline-block;
 72    list-style: none;
 73    padding: 0 0.5rem;
 74}
 75
 76main {
 77    font-size: 1.1rem;
 78    font-family: var(--font-sans);
 79}
 80
 81div.index h1 {
 82    font-family: "Merriweather", "Linux Libertine", "Georgia", "Times", serif;
 83    font-size: 2rem;
 84    line-height: 2rem;
 85    font-weight: bolder;
 86}
 87
 88div.index h2 {
 89    font-family: "Merriweather", "Linux Libertine", "Georgia", "Times", serif;
 90    font-size: 1.5rem;
 91    line-height: 2rem;
 92}
 93
 94nav#table-of-contents {
 95    background: #f2f2f2;
 96    padding: 0.2rem 1rem;
 97    font-size: 90%;
 98}
 99
100nav#table-of-contents h2 {
101    font-family: var(--font-sans);
102    font-weight: bold;
103    font-style: italic;
104}
105
106nav#table-of-contents li {
107    list-style-type: square;
108}
109
110nav#table-of-contents li a {
111    color: black;
112}
113nav#table-of-contents li a:hover {
114    color: #33f;
115    background-color: inherit;
116}
117
118code {
119    background-color: #f3f4f4;
120    font-family: var(--font-mono);
121    padding: 0.1rem 0.3rem;
122    border: 1px solid #e1e1e1;
123    border-radius: 4px;
124}
125
126blockquote code {
127    background-color: #999;
128    border-color: #666;
129    color: white;
130}
131
132pre {
133    background-color: #f3f4f4;
134    font-family: var(--font-mono);
135    white-space: pre-wrap;
136    overflow: auto;
137    overflow-x: auto;
138    margin: 1.25rem calc(-1 * var(--content-box-padding));
139    padding: var(--content-box-padding);
140    border: 1px solid #999;
141}
142
143pre.src {
144  position: relative;
145}
146
147pre.src:before {
148  /*display: none;*/
149  position: absolute;
150  background-color: #999;
151  color: #f3f4f4;
152  top: 0;
153  right: 0;
154  padding: 0.2rem 0.5rem;
155}
156
157aside {
158    --aside-offset: 1rem;
159    --aside-offset-lineheight: 1.5rem;
160    background-color: #f8f8f8;
161    padding: calc(var(--content-box-padding) * 0.5) calc(var(--content-box-padding) * 2);
162    float: right;
163    width: var(--aside-width);
164    font-size: 0.9rem;
165    line-height: 1.25rem;
166    border: 1px solid #ccc;
167}
168
169a { text-decoration: none; color: #339; }
170a:hover { color: #33f; background-color: #f6f6f6; }
171
172blockquote {
173    font-family: var(--font-quote);
174    text-rendering: optimizeLegibility;
175    line-height: 1.4;
176    font-style: italic;
177    background-color: #e0e0e0;
178    border-radius: 0.5em;
179    width: 90%;
180    margin: 1em auto;
181    padding: 0.2rem 1.2rem;
182}
183
184h1, h2, h3, h4 {
185    font-family: var(--font-header);
186}
187main header h1 {
188    font-size: 300%;
189    line-height: 3.8rem;
190}
191
192figure figcaption {
193    text-align: center;
194    color: #666;
195    font-style: italic;
196    margin: 0 2rem;
197}
198
199footer {
200    text-align: center;
201    color: #999;
202}
203
204footer a {
205    color: #666;
206}
207
208section img {
209    display: block;
210    margin-left: auto;
211    margin-right: auto;
212}
213
214
215section img.shadow {
216    box-shadow: 0 28px 50px rgba(0,0,0,0.16);
217}
218
219table {
220    margin:1em auto;
221    border-top:2px solid;
222    border-collapse:collapse
223}
224table,thead {
225    border-bottom:2px solid
226}
227table td+td,table th+th {
228    border-left:1px solid gray
229}
230table tr {
231    border-top:1px solid #d3d3d3
232}
233td,th {
234    padding:.3em .6em;
235    vertical-align:middle
236}
237
238.title  { text-align: center;
239           margin-bottom: 1.5rem; }
240.subtitle {
241    text-align: center;
242    font-size: medium;
243    font-weight: bold;
244    margin-top:0;
245    color: #999;
246}
247
248div.drawer:before {
249    content: "";
250    position: absolute;
251    top: 0;
252    bottom: 0;
253    left: 6.4rem;
254    width: 1px;
255    background-color: #555;
256}
257
258div.drawer {
259    display: flex;
260    padding: 0;
261    margin: 1rem;
262    margin-left: -7rem;
263    position: relative;
264    color: #555;
265}
266
267div.drawer h6 {
268    box-sizing: border-box;
269    font-style: italic;
270    flex: 0 0 7rem;
271    margin:0;
272    padding:0;
273    align-self: center;
274    text-align: right;
275    padding-right: 1.2rem;
276}
277
278div.drawer.info:before {
279    background-color: #00529B;
280}
281div.drawer.info {
282    color: #00529B;
283}
284
285div.drawer.note:before {
286    background-color: #9F6000;
287}
288div.drawer.note {
289    color: #9F6000;
290}
291div.drawer.tip:before {
292    background-color: #4F8A10;
293}
294div.drawer.tip {
295    color: #4F8A10;
296}
297div.drawer.warning:before {
298    background-color: #D8000C;
299}
300div.drawer.warning {
301    color: #D8000C;
302}
303div.drawer.results:before {
304    background-color: black;
305}
306div.drawer.results {
307    font-family:monospace,monospace;
308    font-family: var(--font-mono);
309    color: black;
310    width: 100% !important;
311}
312div.drawer.results p {
313    display: block;
314    unicode-bidi: embed;
315    white-space: pre;
316    margin-top: 0;
317}
318div.drawer.results pre {
319    background-color: inherit;
320    border: 0;
321}
322div.drawer.results pre.src:before {
323  background-color: #eee;
324  color: #555;
325}
326
327.tag {
328    font-family:var(--font-mono);
329    font-size: 1rem;
330}
331.tag span {
332    padding:.3em;
333    float:right;
334    margin-right:.5em;
335    border:1px solid #bbb;
336    border-radius:3px;
337    background-clip:padding-box;
338    color:#333;
339    background-color:#eee;
340    line-height:1rem;
341}
342
343.todo   { font-family: monospace; color: red; }
344.done   { font-family: monospace; color: green; }
345.priority { font-family: monospace; color: orange; }
346.timestamp { color: #bebebe; }
347.timestamp-kwd { color: #5f9ea0; }
348.org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
349.org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
350.org-center { margin-left: auto; margin-right: auto; text-align: center; }
351.underline { text-decoration: underline; }
352#postamble p, #preamble p { font-size: 90%; margin: .2em; }
353p.verse { margin-left: 3%; }