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: #00cece;
 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, 1fr);
 41}
 42
 43.pull-right {
 44  padding-top: 20%;
 45  text-align: left;
 46  grid-column: 1 / 13;
 47  grid-row: 2;
 48}
 49
 50.pull-right p:not(:last-child) {
 51  padding: 0px;
 52  margin: 0px;
 53  padding-top: 2%;
 54  padding-left: 3%;
 55  padding-bottom: 1%;
 56}
 57
 58.pull-right h3 {
 59  color: var(--dark);
 60  padding: 0px;
 61  margin: 0px;
 62  padding-top: 7%;
 63  padding-left: 3%;
 64}
 65
 66.pull-left {
 67  grid-column: 1 / 13;
 68  grid-row: 1;
 69}
 70
 71.sep {
 72  display: visible;
 73}
 74
 75.content {
 76  text-align: left;
 77}
 78
 79@media only screen and (min-width: 800px) {
 80  .pull-right {
 81    text-align: left;
 82    max-width: 100%;
 83    grid-column: 10;
 84    padding-left: 20%;
 85    grid-row: 1;
 86  }
 87
 88  .sep {
 89    display: hidden;
 90  }
 91
 92  .pull-left {
 93    grid-column: 3 / 10;
 94    grid-row: 1;
 95  }
 96  .content {
 97    margin: 0 auto;
 98  }
 99  
100  html {
101    font-size: 18px;
102  }
103}
104
105@media only screen and (min-width: 1400px) {
106  .pull-right {
107    max-width: 100%;
108    text-align: left;
109    grid-column: 8;
110    padding-left: 20%;
111    grid-row: 1;
112  }
113
114  .sep {
115    display: hidden;
116  }
117  .pull-left {
118    grid-column: 4 / 8;
119    grid-row: 1;
120  }
121  .content {
122    margin: 0 auto;
123  }
124
125  html {
126    font-size: 18px;
127  }
128}
129
130pre, pre code {
131  padding: 10px;
132  color: var(--code);
133  word-wrap: break-word;
134  overflow-x: auto;
135  white-space: pre-wrap;
136  white-space: -moz-pre-wrap;
137  white-space: -pre-wrap;
138  white-space: -o-pre-wrap;
139  border: 0px solid transparent;
140  border-radius: 5px;
141}
142
143
144code {
145  color: var(--cyan); padding: 2px;
146  border: 0px solid transparent;
147  border-radius: 5px;
148  border-bottom: unset;
149}
150
151.logo {
152  width: 180px;
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@media only screen and (max-width: 70em) {
280  pre {
281    overflow-x: auto;
282  }
283}
284
285.license img {
286  all: initial;
287}
288
289.license img {
290  padding-left: 3%;
291  padding-top: 10px;
292  max-height: 2rem;
293  display: inline-block;
294  vertical-align: text-top;
295  image-orientation: from-image;
296  max-width: 100%;
297  padding-bottom: 5px;
298  cursor: pointer;
299}