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
204::selection {
205  background-color: cyan;
206  color: #021012;
207}
208
209@media only screen and (max-width: 70em) {
210	.left {
211		display: block;
212		margin-right: 0;
213	}
214	.right {
215		display: block;
216	}
217  .right a {
218    margin-right: 15px;
219  }
220	.right a:last-child {
221		margin-right: 0;
222	}
223  
224/*  .container-text {
225    overflow-y: auto;
226  }*/
227
228	.content {
229		left: 7%;
230    right: 7%;
231    bottom: 10%;
232		width: 86%;
233	}
234
235  .content h1, h2, h3 {
236    line-height: 1.5;
237  }
238
239  pre {
240    overflow-x: auto;
241  }
242
243  .logo {
244    width: 180px;
245  }
246}