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
105.logo {
106	width: 220px;
107  padding-bottom: 60px;
108}
109
110.footer {
111	color: gray;
112	bottom: 20px;
113	position: absolute;
114	width: 100%;
115	text-align: center;
116	margin-bottom: 20px;
117}
118
119.header {
120	color: cyan;
121	top: 30px;
122  display: inline-block;
123	position: absolute;
124	width: 100%;
125  align: center;
126	text-align: center;
127}
128
129.header a {
130  margin-right: 20px;
131}
132
133.header a:last-child {
134  margin-right: 0
135}
136
137.muted {
138  color: gray
139}
140
141.muted a {
142  color: cyan
143}
144
145table {
146  width: 100%;
147}
148
149td {
150  white-space: nowrap;
151}
152
153td:first-child {
154  width: 100%;
155  max-width: 1px;
156  white-space: nowrap;
157  text-overflow: ellipsis;
158  overflow: hidden;
159}
160
161a {
162	color: gray;
163	margin: 0;
164	transition: all 200ms;
165	text-decoration: none;
166}
167
168a:hover {
169	color: #021012;
170	background: cyan;
171}
172
173.left {
174	display: inline-block;
175	margin-bottom: 30px;
176	margin-left: 0;
177	margin-right: 30px;
178}
179
180.right {
181	display: inline-block;
182}
183
184.right a {
185	display: inline-block;
186	margin-right: 30px;
187}
188
189.noselect {
190  -webkit-touch-callout:none;
191  -webkit-user-select:none;
192  -khtml-user-select:none;
193  -moz-user-select:none;
194  -ms-user-select:none;
195  user-select:none
196}
197
198img {
199  max-width: 100%;
200  margin: 0 auto;
201  display: block;
202}
203
204
205footer img {
206  all: initial;
207}
208
209.footimgs {
210  padding-top: 10px;
211  max-height: 2rem;
212  display: inline-block;
213  vertical-align: text-top;
214  image-orientation: from-image;
215  max-width: 100%;
216  padding-bottom: 5px;
217  cursor: pointer;
218}
219
220footer a:hover {
221  color: unset;
222  background: unset;
223}
224
225.subtitle {
226  font-style: italic;
227}
228
229h1, h2, h3 {
230  font-weight: normal;
231}
232
233h2 { 
234  color: gray;
235}
236
237h3 {
238  color: cyan;
239}
240
241p {
242  bottom: 2em;
243}
244
245blockquote {
246  border-left: 0.25rem solid gray;
247  color: gray;
248  font-style: italic;
249  margin: .8rem 0;
250  padding: .5rem 1rem
251}
252
253hr {
254  width: 20%;
255}
256
257::selection {
258  background-color: cyan;
259  color: #021012;
260}
261
262@media only screen and (max-width: 70em) {
263	.left {
264		display: block;
265		margin-right: 0;
266	}
267	.right {
268		display: block;
269	}
270  .right a {
271    margin-right: 15px;
272  }
273	.right a:last-child {
274		margin-right: 0;
275	}
276  
277/*  .container-text {
278    overflow-y: auto;
279  }*/
280
281	.content {
282		left: 5%;
283    right: 5%;
284    bottom: 10%;
285		width: 90%;
286	}
287
288  .content h1, h2, h3 {
289    line-height: 1.5;
290  }
291
292  pre {
293    overflow-x: auto;
294  }
295
296  .logo {
297    width: 180px;
298  }
299}