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  border-left: 0.25rem solid gray;
239  color: gray;
240  font-style: italic;
241  margin: .8rem 0;
242  padding: .5rem 1rem
243}
244
245hr {
246  width: 20%;
247}
248
249::selection {
250  background-color: cyan;
251  color: #021012;
252}
253
254@media only screen and (max-width: 70em) {
255	.left {
256		display: block;
257		margin-right: 0;
258	}
259	.right {
260		display: block;
261	}
262  .right a {
263    margin-right: 15px;
264  }
265	.right a:last-child {
266		margin-right: 0;
267	}
268  
269/*  .container-text {
270    overflow-y: auto;
271  }*/
272
273	.content {
274		left: 5%;
275    right: 5%;
276    bottom: 10%;
277		width: 90%;
278	}
279
280  .content h1, h2, h3 {
281    line-height: 1.5;
282  }
283
284  pre {
285    overflow-x: auto;
286  }
287
288  .logo {
289    width: 180px;
290  }
291}