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 0 0;
 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 #bcb6ae;
 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 #bcb6ae;
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
165
166dl img {
167    margin-bottom: -0.4em;
168    margin-right: 0.6em;
169}
170
171dd {
172    margin-bottom: 1em;
173}
174
175div.time {
176    text-align: right;
177    font-style: italic;
178    color: #777;
179    font-size: 0.9em;
180}
181
182div.time p {
183    line-height: 0.5;
184}
185
186hr {
187    border: 0;
188    border-bottom: 2px dashed #aaa;
189}
190
191sub {
192    font-size: small;
193}
194
195/* code */
196code {
197    font-weight: bold;
198    font-size: large;
199    background-color: #0b0b0f;
200    white-space: pre;
201}
202
203pre code {
204    font-weight: normal;
205    font-size: 1em;
206    background: none;
207}
208
209pre {
210    background-color: #0b0b0f;
211    padding: 4px;
212    overflow: auto;
213    max-height: 480px;
214}
215
216kbd {
217    padding: 3px 5px;
218    font: 0.9em monospace;
219    color: #fafafa;
220    background-color: #333;
221    border: 1px solid #222;
222    border-radius: 4px;
223    box-shadow: 0 2px 0 #222;
224}
225
226/* tables */
227table {
228    border-collapse: collapse;
229}
230
231th {
232    background-color: #f7f7e8;
233}
234
235th, td {
236    padding: 0.5em;
237    border: 1px solid #aaa;
238}
239
240tr:nth-child(even) {
241    background-color: #f7f7e8;
242}
243
244/* special */
245::-moz-selection {
246    background-color: #FFAA00;
247    color: #000000;
248}
249
250::selection {
251    background-color: #FFAA00;
252    color: #000000;
253}