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: #eee;
 19}
 20
 21.container-text {
 22  position: absolute;
 23	top: 0;
 24	bottom: 0;
 25	left: 0;
 26	right: 0;
 27	color: #eee;
 28}
 29
 30
 31.introduction {
 32	position: absolute;
 33	top: 50%;
 34	transform: translateY(-50%);
 35	width: 100%;
 36}
 37
 38.content {
 39	position: relative;
 40	font-size: 17px;
 41	top: 10%;
 42  left: 30%;
 43  right: 30%;
 44  width: 40%;
 45  line-height: 1.8;
 46}
 47
 48pre {
 49  padding: 10px;
 50}
 51
 52pre, pre code {
 53    background: #041b1e;
 54    color: #eee;
 55    word-wrap: break-word;
 56    overflow-x: auto;
 57    white-space: pre-wrap;
 58    white-space: -moz-pre-wrap;
 59    white-space: -pre-wrap;
 60    white-space: -o-pre-wrap;
 61}
 62
 63code {
 64    color: cyan;
 65    background: #041b1e;
 66    padding: 1px;
 67}
 68
 69a > code {
 70    transition: all 200ms;
 71    color: gray;
 72}
 73
 74a > code:hover {
 75    color: #eee;
 76    border-bottom: 1px solid cyan;
 77}
 78
 79details > summary {
 80  list-style: none;
 81  color: gray;
 82  cursor: pointer;
 83}
 84
 85details > summary::-webkit-details-marker {
 86  display: none;
 87}
 88
 89.logo {
 90	width: 220px;
 91  padding-bottom: 60px;
 92}
 93
 94.footer {
 95	color: gray;
 96	bottom: 20px;
 97	position: absolute;
 98	width: 100%;
 99	text-align: center;
100	margin-bottom: 20px;
101}
102
103.header {
104	color: cyan;
105	top: 30px;
106  display: inline-block;
107	position: absolute;
108	width: 100%;
109  align: center;
110	text-align: center;
111}
112
113.header a {
114  margin-right: 20px;
115}
116
117.header a:last-child {
118  margin-right: 0
119}
120
121.muted {
122  color: gray
123}
124
125.muted a {
126  color: cyan
127}
128
129table {
130  width: 100%;
131}
132
133td {
134  white-space: nowrap;
135}
136
137td:first-child {
138  width: 100%;
139  max-width: 1px;
140  white-space: nowrap;
141  text-overflow: ellipsis;
142  overflow: hidden;
143}
144
145a {
146	color: gray;
147	margin: 0;
148	transition: all 200ms;
149	text-decoration: none;
150  outline: 0;
151}
152
153a:focus {
154  color: #eee;
155  border-bottom: 1px solid cyan;
156  background: #222;
157}
158
159a:hover {
160  color: #eee;
161	background: #222;
162  border-bottom: 1px solid cyan;
163}
164
165.left {
166	display: inline-block;
167	margin-bottom: 30px;
168	margin-left: 0;
169	margin-right: 30px;
170}
171
172.right {
173	display: inline-block;
174}
175
176.right a {
177	display: inline-block;
178	margin-right: 30px;
179}
180
181.noselect {
182  -webkit-touch-callout:none;
183  -webkit-user-select:none;
184  -khtml-user-select:none;
185  -moz-user-select:none;
186  -ms-user-select:none;
187  user-select:none
188}
189
190img {
191  max-width: 100%;
192  margin: 0 auto;
193  display: block;
194  border: 0px solid transparent;
195  border-radius: 5px;
196}
197
198
199footer img {
200  all: initial;
201}
202
203.footimgs {
204  padding-top: 10px;
205  max-height: 2rem;
206  display: inline-block;
207  vertical-align: text-top;
208  image-orientation: from-image;
209  max-width: 100%;
210  padding-bottom: 5px;
211  cursor: pointer;
212}
213
214footer a:hover {
215  color: unset;
216  background: unset;
217}
218
219.subtitle {
220  font-style: italic;
221  color: gray;
222  background: #041b1e;
223  padding-bottom: 5px;
224}
225
226h1, h2, h3 {
227  font-weight: normal;
228}
229
230h2 { 
231  color: gray;
232}
233
234h3 {
235  color: cyan;
236}
237
238p {
239  bottom: 2em;
240}
241
242blockquote {
243  border-left: 0.25rem solid gray;
244  color: gray;
245  font-style: italic;
246  margin: .8rem 0;
247  padding: .5rem 1rem
248}
249
250hr {
251  width: 20%;
252}
253
254::selection {
255  background-color: gray;
256  color: #021012;
257}
258
259@media only screen and (max-width: 70em) {
260	.left {
261		display: block;
262		margin-right: 0;
263	}
264	.right {
265		display: block;
266	}
267  .right a {
268    margin-right: 15px;
269  }
270	.right a:last-child {
271		margin-right: 0;
272	}
273  
274/*  .container-text {
275    overflow-y: auto;
276  }*/
277
278	.content {
279		left: 5%;
280    right: 5%;
281    bottom: 10%;
282		width: 90%;
283	}
284
285  .content h1, h2, h3 {
286    line-height: 1.5;
287  }
288
289  pre {
290    overflow-x: auto;
291  }
292
293  .logo {
294    width: 180px;
295  }
296}