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