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: #021012;
 76  	background: 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}
151
152a:hover {
153	color: #021012;
154	background: cyan;
155}
156
157.left {
158	display: inline-block;
159	margin-bottom: 30px;
160	margin-left: 0;
161	margin-right: 30px;
162}
163
164.right {
165	display: inline-block;
166}
167
168.right a {
169	display: inline-block;
170	margin-right: 30px;
171}
172
173.noselect {
174  -webkit-touch-callout:none;
175  -webkit-user-select:none;
176  -khtml-user-select:none;
177  -moz-user-select:none;
178  -ms-user-select:none;
179  user-select:none
180}
181
182img {
183  max-width: 100%;
184  margin: 0 auto;
185  display: block;
186  border: 0px solid transparent;
187  border-radius: 5px;
188}
189
190
191footer img {
192  all: initial;
193}
194
195.footimgs {
196  padding-top: 10px;
197  max-height: 2rem;
198  display: inline-block;
199  vertical-align: text-top;
200  image-orientation: from-image;
201  max-width: 100%;
202  padding-bottom: 5px;
203  cursor: pointer;
204}
205
206footer a:hover {
207  color: unset;
208  background: unset;
209}
210
211.subtitle {
212  font-style: italic;
213}
214
215h1, h2, h3 {
216  font-weight: normal;
217}
218
219h2 { 
220  color: gray;
221}
222
223h3 {
224  color: cyan;
225}
226
227p {
228  bottom: 2em;
229}
230
231blockquote {
232  border-left: 0.25rem solid gray;
233  color: gray;
234  font-style: italic;
235  margin: .8rem 0;
236  padding: .5rem 1rem
237}
238
239hr {
240  width: 20%;
241}
242
243::selection {
244  background-color: cyan;
245  color: #021012;
246}
247
248@media only screen and (max-width: 70em) {
249	.left {
250		display: block;
251		margin-right: 0;
252	}
253	.right {
254		display: block;
255	}
256  .right a {
257    margin-right: 15px;
258  }
259	.right a:last-child {
260		margin-right: 0;
261	}
262  
263/*  .container-text {
264    overflow-y: auto;
265  }*/
266
267	.content {
268		left: 5%;
269    right: 5%;
270    bottom: 10%;
271		width: 90%;
272	}
273
274  .content h1, h2, h3 {
275    line-height: 1.5;
276  }
277
278  pre {
279    overflow-x: auto;
280  }
281
282  .logo {
283    width: 180px;
284  }
285}