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	overflow: hidden;
 15	top: 0;
 16	bottom: 0;
 17	left: 0;
 18	right: 0;
 19	color: white;
 20
 21	-webkit-animation: fadein 3s;
 22	   -moz-animation: fadein 3s;
 23	    -ms-animation: fadein 3s;
 24	     -o-animation: fadein 3s;
 25	        animation: fadein 3s;
 26}
 27
 28.container-text {
 29  position: absolute;
 30	/*overflow-y: auto;*/
 31	overflow-x: hidden;
 32	top: 0;
 33	bottom: 0;
 34	left: 0;
 35	right: 0;
 36	color: white;
 37
 38	-webkit-animation: fadein 1.5s;
 39	   -moz-animation: fadein 1.5s;
 40	    -ms-animation: fadein 1.5s;
 41	     -o-animation: fadein 1.5s;
 42	        animation: fadein 1.5s;
 43}
 44
 45@keyframes fadein {
 46	from { opacity: 0; }
 47	to   { opacity: 1; }
 48}
 49
 50@-moz-keyframes fadein {
 51	from { opacity: 0; }
 52	to   { opacity: 1; }
 53}
 54
 55@-webkit-keyframes fadein {
 56	from { opacity: 0; }
 57	to   { opacity: 1; }
 58}
 59
 60.introduction {
 61	position: absolute;
 62	top: 50%;
 63	transform: translateY(-50%);
 64	width: 100%;
 65}
 66
 67.content {
 68	position: absolute;
 69	font-size: 18px;
 70	top: 10%;
 71  left: 30%;
 72  right: 30%;
 73  width: 40%;
 74  line-height: 1.8;
 75}
 76
 77pre {
 78  padding: 10px;
 79}
 80
 81pre, pre code {
 82    background: #041b1e;
 83    color: white;
 84    word-wrap: break-word;
 85    overflow-x: auto;
 86    white-space: pre-wrap;
 87    white-space: -moz-pre-wrap;
 88    white-space: -pre-wrap;
 89    white-space: -o-pre-wrap;
 90}
 91
 92code {
 93    color: cyan;
 94    background: #041b1e;
 95    padding: 1px;
 96}
 97
 98.logo {
 99	width: 220px;
100}
101
102.footer {
103	color: gray;
104	bottom: 20px;
105	position: absolute;
106	width: 100%;
107	text-align: center;
108	margin-bottom: 20px;
109}
110
111.header {
112	color: cyan;
113	top: 30px;
114  display: inline-block;
115	position: absolute;
116	width: 100%;
117	text-align: center;
118}
119
120.header a {
121  margin-right: 20px;
122}
123
124.muted {
125  color: gray
126}
127
128.muted a {
129  color: cyan
130}
131
132a {
133	color: gray;
134	margin: 0;
135	transition: all 200ms;
136	text-decoration: none;
137}
138
139a:hover {
140	color: #021012;
141	background: cyan;
142}
143
144.left {
145	display: inline-block;
146	margin-bottom: 30px;
147	margin-left: 0;
148	margin-right: 30px;
149}
150
151.right {
152	display: inline-block;
153}
154
155.right a {
156	display: inline-block;
157	margin-right: 30px;
158}
159
160.noselect {
161  -webkit-touch-callout:none;
162  -webkit-user-select:none;
163  -khtml-user-select:none;
164  -moz-user-select:none;
165  -ms-user-select:none;
166  user-select:none
167}
168
169img {
170  height: auto;
171  width: 100%;
172
173  max-width: 720px;
174}
175
176footer img {
177  all: initial;
178  * { all: unset; }
179}
180
181h1, h2, h3 {
182  font-weight: normal;
183}
184
185h2 { 
186  color: gray;
187}
188
189h3 {
190  color: cyan;
191}
192
193p {
194  bottom: 2em;
195}
196
197
198@media only screen and (max-width: 70em) {
199	.left {
200		display: block;
201		margin-right: 0;
202	}
203	.right {
204		display: block;
205	}
206  .right a {
207    margin-right: 15px;
208  }
209	.right a:last-child {
210		margin-right: 0;
211	}
212  
213/*  .container-text {
214    overflow-y: auto;
215  }*/
216
217	.content {
218		left: 10%;
219    right: 10%;
220    bottom: 10%;
221		width: 80%;
222	}
223
224  .content h1, h2, h3 {
225    line-height: 1.5;
226  }
227
228  pre {
229    overflow-x: auto;
230  }
231
232  .logo {
233    width: 180px;
234  }
235}