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  margin-bottom: 20px;
154}
155
156footer {
157  color: var(--gray);
158  bottom: 20px;
159  width: 100%;
160  text-align: center;
161  margin-bottom: 20px;
162}
163
164header {
165  color: var(--cyan);
166  top: 30px;
167  display: inline-block;
168  width: 100%;
169  text-align: left;
170  padding-bottom: 2%;
171}
172
173header a {
174  margin-right: 20px;
175}
176
177header a:last-child {
178  margin-right: 0
179}
180
181.muted {
182  color: var(--gray);
183}
184
185.muted a {
186  color: var(--cyan);
187  border-bottom: unset;
188}
189
190table {
191  width: 100%;
192}
193
194td {
195  white-space: nowrap;
196}
197
198td:first-child {
199  width: 100%;
200  max-width: 1px;
201  white-space: nowrap;
202  text-overflow: ellipsis;
203  overflow: hidden;
204}
205
206a {
207  color: var(--gray);
208  margin: 0;
209  transition: all 200ms;
210  text-decoration: none;
211  outline: 0;
212}
213
214a:hover {
215  color: var(--dark);
216  background: var(--light-gray);
217  border-bottom: 1px solid var(--cyan);
218}
219
220img {
221  max-width: 100%;
222  margin: 0 auto;
223  display: block;
224  border: 0px solid transparent;
225  border-radius: 5px;
226}
227
228
229.license a {
230  color: unset;
231  background: unset;
232  border-bottom: unset;
233}
234
235.license a:hover {
236  color: unset;
237  background: unset;
238  border-bottom: unset;
239}
240
241.subtitle {
242  font-style: italic;
243  color: var(--dark);
244  padding-bottom: 30px;
245}
246
247h1, h2, h3 {
248  font-weight: normal;
249}
250
251h2 { 
252  color: var(--gray);
253}
254
255h3 {
256  color: black;
257}
258
259p {
260  bottom: 2em;
261}
262
263blockquote {
264  border-left: 0.25rem solid var(--gray);
265  color: var(--gray);
266  font-style: italic;
267  margin: .8rem 0;
268  padding: .5rem 1rem
269}
270
271hr {
272  width: 20%;
273}
274
275::selection {
276  background-color: var(--sel);
277  color: white;
278}
279
280@media only screen and (max-width: 70em) {
281  pre {
282    overflow-x: auto;
283  }
284}
285
286.license img {
287  all: initial;
288}
289
290.license img {
291  padding-left: 3%;
292  padding-top: 10px;
293  max-height: 2rem;
294  display: inline-block;
295  vertical-align: text-top;
296  image-orientation: from-image;
297  max-width: 100%;
298  padding-bottom: 5px;
299  cursor: pointer;
300}