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