Hello World

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5  -webkit-font-smoothing: inherit;
6}
7
8:root,
9[data-theme="dark"] {
10  --fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
11    "Helvetica Neue", sans-serif;
12
13  --main-bg-color: #282a36;
14  --second-bg-color: #44475a;
15  --second-bg-color-hsl: hsl(232, 14%, 31%);
16  --second-bg-color-hsl-hover: hsla(var(--main-bg-color), 80%);
17  --main-color: #f8f8f2;
18  --comment-color: #acb8d3;
19  --border-color: var(--second-bg-color);
20  --text-color: var(--comment-color);
21  --color-cyan: #8be9fd;
22  --color-green: #50fa7b;
23  --color-green-dark: #729075;
24  --color-orange: #ffb86c;
25  --color-pink: #ff79c6;
26  --color-purple: #bd93f9;
27  --color-red: #ff5555;
28  --color-yellow: #f1fa8c;
29  --base-size-128: 8rem;
30  --base-size-112: 7rem;
31  --base-size-96: 6rem;
32  --base-size-80: 5rem;
33  --base-size-64: 4rem;
34  --base-size-48: 3rem;
35  --base-size-44: 2.75rem;
36  --base-size-40: 2.5rem;
37  --base-size-36: 2.25rem;
38  --base-size-32: 2rem;
39  --base-size-28: 1.75rem;
40  --base-size-24: 1.5rem;
41  --base-size-20: 1.25rem;
42  --base-size-16: 1rem;
43  --base-size-12: 0.75rem;
44  --base-size-8: 0.5rem;
45  --base-size-4: 0.25rem;
46}
47
48[data-theme="light"] {
49  --fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
50    "Helvetica Neue", sans-serif;
51  --main-bg-color: #ffffff;
52  --main-color: #1f2328;
53  --second-bg-color: #f6f8fa;
54  --comment-color: #0969da;
55  --border-color: #d0d7de;
56  --text-color: #656d76;
57  --color-cyan: #8be9fd;
58  --color-green: #50fa7b;
59  --color-green-dark: #729075;
60  --color-orange: #ffb86c;
61  --color-pink: #ff79c6;
62  --color-purple: #bd93f9;
63  --color-red: #ff5555;
64  --color-yellow: #f1fa8c;
65  --base-size-128: 8rem;
66  --base-size-112: 7rem;
67  --base-size-96: 6rem;
68  --base-size-80: 5rem;
69  --base-size-64: 4rem;
70  --base-size-48: 3rem;
71  --base-size-44: 2.75rem;
72  --base-size-40: 2.5rem;
73  --base-size-36: 2.25rem;
74  --base-size-32: 2rem;
75  --base-size-28: 1.75rem;
76  --base-size-24: 1.5rem;
77  --base-size-20: 1.25rem;
78  --base-size-16: 1rem;
79  --base-size-12: 0.75rem;
80  --base-size-8: 0.5rem;
81  --base-size-4: 0.25rem;
82}
83
84html[data-theme="dark"] {
85
86}
87
88[data-theme="dark"] {
89
90}
91
92@media (prefers-color-scheme: dark) {
93}
94
95body {
96  margin: 0;
97  padding: 0;
98  color: var(--main-color);
99  background-color: var(--main-bg-color);
100  font-family: var(--fonts);
101}
102body.dark {
103}
104
105body + input:checked {
106}
107
108a {
109  color: var(--comment-color);
110}
111
112li {
113
114}
115
116.loader {
117  border: 16px solid #f3f3f3;
118  border-top: 16px solid var(--comment-color);
119  border-radius: 50%;
120  width: 80px;
121  height: 80px;
122  margin: 150px auto;
123  animation: spin 1.2s linear infinite;
124  display: none;
125}
126@keyframes spin {
127  0% { transform: rotate(0deg); }
128  100% { transform: rotate(360deg); }
129}
130
131#back-home {
132
133}
134
135#back-home a {
136  color: var(--main-color);
137  text-decoration: none;
138}
139#back-home a:hover span {
140  text-decoration: underline;
141}
142
143.container {
144  max-width: 75rem;
145  margin: 0 auto;
146  padding: 1em;
147  display: grid;
148  gap: 4rem;
149}
150
151.toggle {
152  position: fixed;
153  top: 1em;
154  right: 1em;
155}
156
157#toggle-mode {
158  display: none;
159}
160
161.toggle-mode {
162  position: relative;
163  display: block;
164  height: 1em;
165  width: 2em;
166  background: var(--comment-color);
167  box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4), inset 0px -5px 15px rgba(255, 255, 255, 0.4);
168  border-radius: 3em;
169  cursor: pointer;
170}
171.toggle-mode:after {
172  content: "";
173  height: 0.8em;
174  width: 0.8em;
175  border-radius: 1em;
176  background: linear-gradient(180deg, var(--second-bg-color), var(--main-bg-color));
177  position: absolute;
178  top: 0.1em;
179  left: 0.1em;
180}
181
182#toggle-mode:checked + .toggle-mode:after {
183  left: calc(2em - 0.1em);
184  transform: translateX(-100%);
185  background: var(--color-orange);
186}
187label,
188label:after {
189  transition: 0.3s;
190}
191
192.links {
193  display: flex;
194  gap: 1rem;
195}
196
197h2.title {
198  font-size: var(--base-size-36);
199  margin-bottom: 1rem;
200}
201
202.cards {
203  display: grid;
204  grid-template-columns: repeat(3, 1fr);
205  grid-auto-rows: 1fr;
206  gap: 1rem;
207}
208.card {
209  display: flex;
210  flex-direction: column;
211  gap: 1rem;
212  padding: 1rem;
213  background-color: var(--main-bg-color);
214  box-shadow: 0px 2.1px 4.9px rgba(0, 0, 0, 0.035), 0px 17px 39px rgba(0, 0, 0, 0.07);
215  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
216  border: 1px solid var(--border-color);
217  border-radius: var(--base-size-12);
218  transition: background-color 0.6s, color 0.6s;
219  text-decoration: none;
220}
221.card:hover {
222  cursor: pointer;
223  background-color: var(--second-bg-color);
224}
225.card .title {
226  display: flex;
227  flex-grow: 1;
228  color: var(--main-color);
229  font-weight: 500;
230  text-decoration: none;
231}
232.card .title::after {
233  color: var(--comment-color);
234  margin-left: auto;
235  content: "\2197";
236  text-decoration: none;
237  display: inline-block;
238  transition: 0.2s;
239}
240.card:hover .title::after {
241  transform: translateY(-0.5rem);
242}
243.card .text {
244  color: var(--text-color);
245}
246
247#about {
248
249}
250#about .text {
251  font-size: var(--base-size-24);
252  font-weight: 500;
253  margin-bottom: 1em;
254}
255
256#availability {
257  display: flex;
258  align-items: center;
259  padding: 1rem;
260  border: 1px solid var(--border-color);
261  border-radius: var(--base-size-12);
262  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
263  font-weight: 500;
264  color: var(--comment-color);
265  background-color: var(--second-bg-color);
266}
267#availability .status {
268  content: " ";
269  height: var(--base-size-8);
270  width: var(--base-size-8);
271  border-radius: 100%;
272  background-color: var(--color-green);
273  margin-right: 1rem;
274}
275
276#projects {
277}
278.projects--list li {
279  padding: 0.375rem; /* 6px */
280}
281
282#learning li {
283  padding: 0.375rem;
284}
285
286#social .grid {
287  display: grid;
288  grid-template-columns: repeat(2, 1fr);
289  gap: 1rem;/
290}
291#social .grid .card {
292  padding: 1rem;
293  display: flex;
294  text-decoration: none;
295}
296#social .grid .card::before {
297}
298#social .card .title::after {
299  margin-left: auto;
300  content: "\2197";
301  transition: 0.2s;
302}
303#social .grid .card:hover {
304}
305#social .grid .card:hover::after {
306  transform: translate(0.5rem);
307}
308
309#passenger-counter {
310  background: var(--comment-color);
311  padding: 1em;
312  display: flex;
313  flex-direction: column;
314  gap: 1em;
315}
316#passenger-counter #counter-el {
317}
318#passenger-counter button {
319  padding: 1em;
320  border: none;
321  background-color: var(--main-bg-color);
322  color: var(--main-color);
323  cursor: pointer;
324}
325
326#js-test {
327  margin-top: 1em;
328}
329
330#fetch .grid {
331  display: grid;
332  grid-template-columns: repeat(3, 1fr);
333  gap: 1rem;
334}
335#fetch .grid .card {
336  display: flex;
337  flex-direction: column;
338  padding: 1em;
339}
340
341@media (max-width: 30em) {
342}
343
344@container (min-width: 600px) {
345  #about .text {
346    font-size: 2em;
347  }
348}
349@media (max-width: 1200px) {
350  .cards {
351    grid-template-columns: repeat(2, 1fr);
352  }
353}
354@media (max-width: 600px) {
355  .cards {
356    grid-template-columns: repeat(1, 1fr);
357  }
358  #social .grid {
359    grid-template-columns: repeat(1, 1fr);
360  }
361}
362
Copy