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