1@import url('https://rsms.me/inter/inter.css');
  2html { font-family: 'Inter', sans-serif; }
  3@supports (font-variation-settings: normal) {
  4  html { font-family: 'Inter var', sans-serif; }
  5}
  6
  7html,
  8body {
  9  background: #151B1B;
 10}
 11
 12.container {
 13  position: absolute;
 14  top: 0;
 15  bottom: 0;
 16  left: 0;
 17  right: 0;
 18  color: #eee;
 19}
 20
 21.container-text {
 22  position: absolute;
 23  top: 0;
 24  bottom: 0;
 25  left: 0;
 26  right: 0;
 27  color: #eee;
 28}
 29
 30
 31.introduction {
 32  position: absolute;
 33  top: 50%;
 34  transform: translateY(-50%);
 35  width: 100%;
 36}
 37
 38.content {
 39  position: relative;
 40  font-size: 17px;
 41  top: 10%;
 42  left: 30%;
 43  right: 30%;
 44  width: 40%;
 45  line-height: 1.8;
 46}
 47
 48pre {
 49  padding: 10px;
 50}
 51
 52pre, pre code {
 53    background: #1D2122;
 54    color: #eee;
 55    word-wrap: break-word;
 56    overflow-x: auto;
 57    white-space: pre-wrap;
 58    white-space: -moz-pre-wrap;
 59    white-space: -pre-wrap;
 60    white-space: -o-pre-wrap;
 61    border: 0px solid transparent;
 62    border-radius: 5px;
 63}
 64
 65code {
 66    color: cyan;
 67    /*background: #041b1e;*/
 68    padding: 1px;
 69    border: 0px solid transparent;
 70    border-radius: 5px;
 71    border-bottom: unset;
 72}
 73
 74a > code {
 75    transition: all 200ms;
 76}
 77
 78
 79details > summary {
 80  list-style: none;
 81  color: gray;
 82  cursor: pointer;
 83}
 84
 85details > summary::-webkit-details-marker {
 86  display: none;
 87}
 88
 89.logo {
 90  width: 220px;
 91  padding-bottom: 60px;
 92}
 93
 94.footer {
 95  color: gray;
 96  bottom: 20px;
 97  position: absolute;
 98  width: 100%;
 99  text-align: center;
100  margin-bottom: 20px;
101}
102
103.header {
104  color: cyan;
105  top: 30px;
106  display: inline-block;
107  position: absolute;
108  width: 100%;
109  align: center;
110  text-align: center;
111}
112
113.header a {
114  margin-right: 20px;
115}
116
117.header a:last-child {
118  margin-right: 0
119}
120
121.muted {
122  color: gray
123}
124
125.muted a {
126  color: cyan;
127	border-bottom: unset;
128}
129
130table {
131  width: 100%;
132}
133
134td {
135  white-space: nowrap;
136}
137
138td:first-child {
139  width: 100%;
140  max-width: 1px;
141  white-space: nowrap;
142  text-overflow: ellipsis;
143  overflow: hidden;
144}
145
146.navbar a {
147  border-bottom: unset;
148}
149
150.navbar a:hover {
151	background: #222;
152}
153
154.posts a {
155  border-bottom: unset;
156}
157
158.posts a:hover {
159	background: #222;
160}
161
162/*a {
163	color: gray;
164	margin: 0;
165	transition: all 200ms;
166	text-decoration: none;
167  outline: 0;
168}*/
169
170a {
171  color: gray;
172  margin: 0;
173  transition: all 200ms;
174  text-decoration: none;
175  outline: 0;
176}
177
178/*a:hover {
179  color: #021012;
180  background: cyan;
181  border-bottom: 1px solid cyan;
182}*/
183
184a:hover {
185  color: #eee;
186	background: #222;
187  border-bottom: 1px solid cyan;
188}
189
190.left {
191  display: inline-block;
192  margin-bottom: 30px;
193  margin-left: 0;
194  margin-right: 30px;
195}
196
197.right {
198  display: inline-block;
199}
200
201.right a {
202  display: inline-block;
203  margin-right: 30px;
204}
205
206.noselect {
207  -webkit-touch-callout:none;
208  -webkit-user-select:none;
209  -khtml-user-select:none;
210  -moz-user-select:none;
211  -ms-user-select:none;
212  user-select:none
213}
214
215img {
216  max-width: 100%;
217  margin: 0 auto;
218  display: block;
219  border: 0px solid transparent;
220  border-radius: 5px;
221}
222
223
224
225footer img {
226  all: initial;
227}
228
229.footimgs {
230  padding-top: 10px;
231  max-height: 2rem;
232  display: inline-block;
233  vertical-align: text-top;
234  image-orientation: from-image;
235  max-width: 100%;
236  padding-bottom: 5px;
237  cursor: pointer;
238}
239
240footer a {
241  color: unset;
242  background: unset;
243  border-bottom: unset;
244}
245
246footer a:hover {
247  color: unset;
248  background: unset;
249  border-bottom: unset;
250}
251
252.subtitle {
253  font-style: italic;
254  color: #eee;
255  padding-bottom: 30px;
256}
257
258
259h1, h2, h3 {
260  font-weight: normal;
261}
262
263h2 { 
264  color: gray;
265}
266
267h3 {
268  color: cyan;
269}
270
271p {
272  bottom: 2em;
273}
274
275blockquote {
276  border-left: 0.25rem solid gray;
277  color: gray;
278  font-style: italic;
279  margin: .8rem 0;
280  padding: .5rem 1rem
281}
282
283hr {
284  width: 20%;
285}
286
287::selection {
288  background-color: gray;
289  color: cyan;
290}
291
292@media only screen and (max-width: 70em) {
293  .left {
294    display: block;
295    margin-right: 0;
296  }
297  .right {
298    display: block;
299  }
300  .right a {
301    margin-right: 15px;
302  }
303  .right a:last-child {
304    margin-right: 0;
305  }
306  
307/*  .container-text {
308    overflow-y: auto;
309  }*/
310
311  .content {
312    left: 5%;
313    right: 5%;
314    bottom: 10%;
315    width: 90%;
316  }
317
318  .content h1, h2, h3 {
319    line-height: 1.5;
320  }
321
322  pre {
323    overflow-x: auto;
324  }
325
326  .logo {
327    width: 180px;
328  }
329}