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