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}
 43
 44.pull-right {
 45  padding-top: 20%;
 46  text-align: left;
 47  grid-column: 1 / 13;
 48  grid-row: 2;
 49}
 50
 51.pull-right > p:not(:last-child) {
 52  padding: 0px;
 53  margin: 0px;
 54  padding-top: 2%;
 55  padding-left: 3%;
 56  padding-bottom: 1%;
 57}
 58
 59.pull-right > h3 {
 60  color: var(--dark);
 61  padding: 0px;
 62  margin: 0px;
 63  padding-top: 7%;
 64  padding-left: 3%;
 65}
 66
 67.pull-left {
 68  grid-column: 1 / 13;
 69  grid-row: 1;
 70}
 71
 72.sep {
 73  display: visible;
 74}
 75
 76.content {
 77  text-align: left;
 78}
 79
 80pre {
 81  overflow-x: auto;
 82  overflow-y: hidden;
 83  padding: 10px;
 84  min-width: 0;
 85}
 86
 87
 88code {
 89  color: var(--cyan);
 90  border-bottom: unset;
 91}
 92
 93pre > code {
 94  color: var(--code);
 95  background: unset;
 96}
 97
 98@media only screen and (min-width: 800px) {
 99  .pull-right {
100    text-align: left;
101    max-width: 100%;
102    grid-column: 10 / 12;
103    padding-left: 20%;
104    grid-row: 1;
105  }
106
107  .sep {
108    display: hidden;
109  }
110
111  .pull-left {
112    grid-column: 3 / 10;
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: 1400px) {
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 {
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}
269
270hr {
271  width: 20%;
272}
273
274::selection {
275  background-color: var(--sel);
276  color: white;
277}
278
279.license img {
280  all: initial;
281}
282
283.license img {
284  padding-left: 3%;
285  padding-top: 10px;
286  max-height: 2rem;
287  display: inline-block;
288  vertical-align: text-top;
289  image-orientation: from-image;
290  max-width: 100%;
291  padding-bottom: 5px;
292  cursor: pointer;
293}