1:root {
  2  --bg: #fff;
  3  --cyan: #1e9191;
  4  --light-gray: #eee;
  5  --gray: #6a6a6a;
  6  --code: #666;
  7  --dark: #444;
  8  --darker: #222;
  9  --code-bg: #0000000a;
 10}
 11
 12body {
 13  text-align: center;
 14}
 15
 16html {
 17  /* background: var(--bg);*/
 18  font-size: 16px;
 19  line-height: 1.5;
 20}
 21
 22.content > article, p, blockquote, ul {
 23  line-height: 1.5;
 24  font-family: serif;
 25  font-feature-settings: normal;
 26}
 27
 28.content {
 29  margin: auto 5% auto 5%; 
 30}
 31
 32.pull-right > p {
 33  font-family:  serif;
 34}
 35
 36a {
 37  color: var(--gray);
 38  text-decoration: none;
 39  word-wrap: break-word;
 40}
 41
 42a:hover {
 43  background: #eee;
 44  color: var(--dark);
 45}
 46
 47article a, a:hover, footer a {
 48  color: inherit;
 49  background: 0;
 50  text-decoration: underline;
 51  outline: 0;
 52}
 53
 54.navbar {
 55  margin: 2px 0;
 56}
 57
 58.sidebar-link {
 59  font-size: 15px;
 60  color: var(--darker);
 61}
 62
 63.container {
 64  display: grid;
 65  grid-template-columns: repeat(12, minmax(0, 1fr));
 66  min-width: 0;
 67  margin-bottom: 20px;
 68}
 69
 70.pull-right {
 71  padding-top: 20%;
 72  text-align: left;
 73  grid-column: 1 / 13;
 74  grid-row: 2;
 75}
 76
 77.pull-right > p:not(:last-child) {
 78  padding: 0px;
 79  margin: 0px;
 80  padding-top: 2%;
 81  padding-left: 3%;
 82  padding-bottom: 1%;
 83}
 84
 85.pull-right > h3 {
 86  color: var(--dark);
 87  padding: 0px;
 88  margin: 0px;
 89  padding-top: 7%;
 90  padding-left: 3%;
 91}
 92
 93.pull-left {
 94  grid-column: 1 / 13;
 95  grid-row: 1;
 96}
 97
 98.openring {
 99  display: inline-block;
100}
101
102.openring-feed > p {
103  padding: 4px 8px 4px;
104  font-family: serif;
105}
106
107.sep {
108  display: visible;
109}
110
111.content {
112  text-align: left;
113}
114
115pre {
116  overflow-x: auto;
117  overflow-y: hidden;
118  padding: 10px;
119  min-width: 0;
120  background-color: var(--code-bg) !important;
121  font-size: 16px !important;
122}
123
124pre > code {
125  color: var(--code);
126}
127
128code {
129  font-variant: normal;
130  font-size: 16px !important;
131  color: var(--dark);
132  border-bottom: unset;
133}
134
135@media only screen and (min-width: 800px) {
136  .pull-right {
137    text-align: left;
138    max-width: 100%;
139    grid-column: 9 / 13;
140    grid-row: 1;
141  }
142
143  .logo {
144    width: 10% !important;
145  }
146  .sep {
147    display: hidden;
148  }
149
150  .pull-left {
151    grid-column: 3 / 11;
152    grid-row: 1;
153  }
154  .content {
155    margin: 0%;
156  }
157  
158  .openring {
159    display: grid;
160    grid-template-columns: repeat(3, minmax(0, 1fr));
161    min-width: 0;
162  }
163  
164  .openring-feed {
165    grid-row: 1;
166    font-size: 16px;
167    padding: 4px 8px 4px;
168  }
169
170}
171
172@media only screen and (min-width: 1200px) {
173  .pull-right {
174    max-width: 100%;
175    text-align: left;
176    grid-column: 8 / 10;
177    padding-left: 10%;
178    grid-row: 1;
179  }
180
181  .logo {
182    width: 10% !important;
183  }
184
185  html {
186    font-size: 16px;
187  }
188
189  code {
190    font-size: 17px;
191  }
192
193  pre {
194    font-size: 17px;
195  }
196
197  .sep {
198    display: hidden;
199  }
200  .pull-left {
201    grid-column: 5 / 9;
202    grid-row: 1;
203  }
204  .content {
205    margin: 0 auto;
206  }
207
208  .openring {
209    display: grid;
210    grid-template-columns: repeat(3, minmax(0, 1fr));
211    min-width: 0;
212  }
213  
214  .openring-feed {
215    grid-row: 1;
216    font-size: 16px;
217    padding: 4px 8px 4px;
218  }
219}
220
221.logo {
222  width: 14%;
223}
224
225footer {
226  bottom: 20px;
227  width: 100%;
228  text-align: center;
229  margin-bottom: 20px;
230}
231
232.lol {
233  font-variant-caps: all-small-caps;
234  letter-spacing: 0.3em;
235  padding-left: 0.3em;
236}
237
238.hero {
239  float: left;
240}
241
242header {
243  top: 30px;
244  display: inline-block;
245  width: 100%;
246  text-align: left;
247  padding-bottom: 2%;
248}
249
250header a {
251  margin-right: 20px;
252}
253
254header a:last-child {
255  margin-right: 0
256}
257
258.muted {
259  color: var(--gray);
260  font-family: serif;
261  font-size: 14px;
262}
263
264.muted a {
265  color: var(--cyan);
266  border-bottom: unset;
267}
268
269table {
270  width: 100%;
271}
272
273img {
274  max-width: 100%;
275  margin: 0 auto;
276/*  display: block; */
277  border: 0px solid transparent;
278  border-radius: 5px;
279}
280
281
282.icons a {
283  color: unset;
284  background: unset;
285  border-bottom: unset;
286  text-decoration: none;
287}
288
289.icons a:hover {
290  color: unset;
291  background: unset;
292  border-bottom: unset;
293}
294
295.subtitle {
296  font-style: italic;
297  font-weight: normal;
298  font-variant: unset;
299  color: var(--dark);
300  padding-bottom: 20px;
301}
302
303h2 { 
304  color: var(--dark);
305  font-size: 20px;
306  margin: 0px;
307  padding: 0px;
308}
309
310h1 {
311  font-size: 24px;
312  margin: 0px;
313  padding: 0px;
314}
315
316h3 {
317  color: black;
318}
319
320p {
321  bottom: 2em;
322}
323
324blockquote {
325  border-left: 0.25rem solid var(--gray);
326  color: var(--dark);
327  font-style: italic;
328  margin: .8rem 0;
329  padding: .5rem 1rem
330}
331hr {
332  width: 20%;
333}
334
335::selection {
336  background-color: var(--dark);
337  color: white;
338}
339
340.icons img {
341  all: initial;
342}
343
344.icons img {
345  padding-left: 3%;
346  padding-top: 10px;
347  max-height: 2rem;
348  display: inline-block;
349  vertical-align: text-top;
350  image-orientation: from-image;
351  max-width: 100%;
352  padding-bottom: 5px;
353  cursor: pointer;
354}
355
356.post-date {
357  float: left;
358  color: var(--gray);
359}
360
361.index-date {
362  white-space: nowrap;
363  vertical-align: baseline;
364}
365
366.index-post {
367  padding-bottom: 7px;
368}