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