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