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