1/* main */
  2body {
  3    background-color: #000;
  4    margin: 0;
  5}
  6
  7article {
  8    background-color: #fffff0;
  9}
 10
 11nav, main, footer div {
 12    max-width: 720px;
 13    margin: 0 auto;
 14}
 15
 16main {
 17    padding: 10px 20px;
 18    border-radius: 4px;
 19    background-color: #fffff7;
 20    box-shadow: 0 0 10px #eee;
 21}
 22
 23/* navigation */
 24nav.sections {
 25    padding-top: 20px;
 26    display: flex;
 27    justify-content: space-between;
 28}
 29
 30nav.sections ul {
 31    list-style-type: none;
 32    margin: 0;
 33    padding: 0;
 34    margin-bottom: 8px;
 35}
 36
 37nav.sections li {
 38    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 39    display: inline;
 40    margin: 0 -2px;
 41    font-size: 1.3em;
 42}
 43
 44nav.sections .left a {
 45    color: #666;
 46    border-bottom: solid 2px #A8A8A8;
 47    padding: 0 16px;
 48}
 49
 50nav.sections .left a.selected, nav.sections .left a:hover {
 51    color: #000000;
 52    border-bottom: solid 2px #444444;
 53}
 54
 55nav.sections img {
 56    margin: 0 4px;
 57}
 58
 59.left {
 60    justify-self: flex-start;
 61}
 62
 63.right {
 64    justify-self: flex-end;
 65}
 66
 67/* footer */
 68footer {
 69    margin-top: 32px;
 70    min-height: 64px;
 71    background: linear-gradient(#fffff0, #ccccc0);
 72}
 73
 74footer p {
 75    font-style: italic;
 76    color: #666;
 77    font-family: serif;
 78}
 79
 80footer img {
 81    display: inline-block;
 82    vertical-align: middle;
 83}
 84
 85.abyss {
 86    text-align: center;
 87}
 88
 89/* headers */
 90h1, h2 {
 91    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 92    font-size: 200%;
 93    font-weight: lighter;
 94    text-transform: capitalize;
 95    padding-bottom: 10px;
 96    border-bottom: 1px solid #000;
 97    text-align: center;
 98}
 99
100h1.title {
101    text-align: center;
102    font-family: serif;
103    font-size: 2.5em;
104    font-weight: lighter;
105    font-variant-caps: small-caps;
106    border-bottom: 4px double #000;
107}
108
109h3 {
110    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
111    font-size: larger;
112    font-weight: lighter;
113    text-decoration: underline;
114}
115
116h1:not(.title):hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor {
117    opacity: 1;
118}
119
120.anchor {
121    float: left;
122    padding-right: 0.4ch;
123    margin-left: -1.3ch;
124    opacity: 0;
125    transition: opacity 150ms;
126}
127
128/* body */
129p, li, dl, summary {
130    font-family: Tahoma, Geneva, sans-serif;
131    font-size: 1.1em;
132    line-height: 1.5;
133}
134
135img {
136    max-width: 100%;
137}
138
139.dim {
140    color: #999;
141    font-size: smaller;
142}
143
144a {
145    text-decoration: none;
146    color: #c74727;
147    border-bottom: 0 dashed rgba(0, 0, 0, 0);
148    transition: color 300ms, border-bottom 300ms;
149}
150
151a:hover {
152    color: #b73717;
153    border-bottom: 1px solid #b73717;
154}
155
156blockquote {
157    border-left: 4px solid #000;
158    padding-left: 8px;
159    font-style: italic;
160    color: #444;
161}
162
163.footnote-definition:target {
164    background-color: rgba(255, 255, 0, 0.2);
165}
166
167dl img {
168    margin-bottom: -0.4em;
169    margin-right: 0.6em;
170}
171
172dd {
173    margin-bottom: 1em;
174}
175
176div.time {
177    text-align: right;
178    font-style: italic;
179    color: #777;
180    font-size: 0.9em;
181}
182
183div.time p {
184    line-height: 0.5;
185}
186
187hr {
188    border: 0;
189    border-bottom: 2px dashed #aaa;
190}
191
192sub {
193    font-size: small;
194}
195
196/* code */
197code {
198    font-weight: bold;
199    font-size: large;
200    background-color: #f7f7f0;
201    white-space: pre;
202}
203
204pre code {
205    font-weight: normal;
206    font-size: 1em;
207    background: none;
208}
209
210pre {
211    background-color: #eee;
212    padding: 4px;
213    overflow: auto;
214    max-height: 480px;
215}
216
217kbd {
218    padding: 3px 5px;
219    font: 0.9em monospace;
220    color: #333;
221    background-color: #fafafa;
222    border: 1px solid #ddd;
223    border-radius: 4px;
224    box-shadow: 0 2px 0 #ddd;
225}
226
227/* tables */
228table {
229    border-collapse: collapse;
230}
231
232th {
233    background-color: #f7f7e8;
234}
235
236th, td {
237    padding: 0.5em;
238    border: 1px solid #aaa;
239}
240
241tr:nth-child(even) {
242    background-color: #f7f7e8;
243}
244
245/* graphs post */
246div.matrix table {
247    border-width: 0 2pt 0 2pt;
248    border-style: solid;
249    border-color: #000;
250}
251
252/* poor man's matrix */
253div.matrix tr:first-child td:first-child, div.matrix tr:first-child td:last-child {
254    border-top: 2pt solid #000;
255}
256
257div.matrix tr:last-child td:first-child, div.matrix tr:last-child td:last-child {
258    border-bottom: 2pt solid #000;
259}
260
261div.matrix td {
262    border: none;
263}
264
265em.math {
266    font-family: 'Times New Roman', Times, serif;
267    font-size: larger;
268}
269
270/* special */
271::-moz-selection {
272    background-color: #FFAA00;
273    color: #000000;
274}
275
276::selection {
277    background-color: #FFAA00;
278    color: #000000;
279}