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  * { all: unset; }
181}
182
183footer a:hover {
184  all: initial;
185  * { all: unset; }
186}
187
188h1, h2, h3 {
189  font-weight: normal;
190}
191
192h2 { 
193  color: gray;
194}
195
196h3 {
197  color: cyan;
198}
199
200p {
201  bottom: 2em;
202}
203
204blockquote {
205  font-style: italic;
206  color: gray;
207}
208
209blockquote::before {
210  content: "\“";
211  font-size: 40px;
212  font-weight: bold;
213}
214
215blockquote::after {
216  content: "\”";
217  font-size: 40px;
218  font-weight: bold;
219  
220}
221
222::selection {
223  background-color: cyan;
224  color: #021012;
225}
226
227@media only screen and (max-width: 70em) {
228	.left {
229		display: block;
230		margin-right: 0;
231	}
232	.right {
233		display: block;
234	}
235  .right a {
236    margin-right: 15px;
237  }
238	.right a:last-child {
239		margin-right: 0;
240	}
241  
242/*  .container-text {
243    overflow-y: auto;
244  }*/
245
246	.content {
247		left: 7%;
248    right: 7%;
249    bottom: 10%;
250		width: 86%;
251	}
252
253  .content h1, h2, h3 {
254    line-height: 1.5;
255  }
256
257  pre {
258    overflow-x: auto;
259  }
260
261  .logo {
262    width: 180px;
263  }
264}