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