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