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