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