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: 20%;
 72  right: 20%;
 73  width: 60%;
 74  line-height: 1.8;
 75}
 76
 77pre {
 78  padding: 10px;
 79}
 80
 81pre, code {
 82    background: #041b1e;
 83}
 84
 85.logo {
 86	width: 220px;
 87}
 88
 89.footer {
 90	color: gray;
 91	bottom: 20px;
 92	position: absolute;
 93	width: 100%;
 94	text-align: center;
 95	margin-bottom: 20px;
 96}
 97
 98.header {
 99	color: cyan;
100	top: 10px;
101	position: absolute;
102	width: 100%;
103	text-align: left;
104	margin: 20px;
105}
106
107a {
108	color: gray;
109	margin: 0;
110	transition: all 200ms;
111	text-decoration: none;
112}
113
114a:hover {
115	color: #021012;
116	background: cyan;
117}
118
119.left {
120	display: inline-block;
121	margin-bottom: 30px;
122	margin-left: 0;
123	margin-right: 30px;
124}
125
126.right {
127	display: inline-block;
128}
129
130.right a {
131	display: inline-block;
132	margin-right: 30px;
133}
134
135.noselect {
136  -webkit-touch-callout:none;
137  -webkit-user-select:none;
138  -khtml-user-select:none;
139  -moz-user-select:none;
140  -ms-user-select:none;
141  user-select:none
142}
143
144img {
145  height: auto;
146  width: 100%;
147
148  max-width: 720px;
149}
150
151h1, h2, h3 {
152  font-weight: normal;
153}
154
155h2 { 
156  color: gray;
157}
158
159h3 {
160  color: cyan;
161}
162
163p {
164  bottom: 2em;
165}
166
167
168@media only screen and (max-width: 70em) {
169	.left {
170		display: block;
171		margin-right: 0;
172	}
173	.right {
174		display: block;
175	}
176	.right a:last-child {
177		margin-right: 0;
178	}
179  
180  .container-text {
181    overflow-y: auto;
182  }
183
184	.content {
185		left: 10%;
186    right: 10%;
187    bottom: 10%;
188		width: 80%;
189	}
190
191  .content h1, h2, h3 {
192    line-height: 1.5;
193  }
194
195  pre {
196    overflow-x: auto;
197  }
198
199  .logo {
200    width: 180px;
201  }
202}