1@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;500;700;900&display=swap");
  2@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
  3
  4::-webkit-scrollbar {
  5  width: 10px;
  6}
  7
  8::-webkit-scrollbar-track-piece {
  9  background-color: #393939;
 10}
 11
 12::-webkit-scrollbar-thumb {
 13  background-color: #ffffff;
 14}
 15
 16html {
 17  scrollbar-color: #ffffff #393939;
 18  scrollbar-width: thin;
 19}
 20
 21body {
 22  position: relative;
 23  margin: 0;
 24  font-family: "Source Sans Pro";
 25  color: white;
 26  background: white;
 27  font-weight: 200;
 28  width: 100vw;
 29  height: 100vh;
 30  text-shadow: 0px 0px 5px black;
 31}
 32
 33#container {
 34  width: 100%;
 35  height: 100%;
 36  scroll-snap-type: y mandatory;
 37  overflow-y: scroll;
 38  background: black;
 39}
 40
 41.card {
 42  position: relative;
 43  scroll-snap-align: start;
 44  height: 100vh;
 45}
 46
 47#introduction-group {
 48  display: flex;
 49  height: 100%;
 50  flex-direction: column;
 51  align-items: center;
 52  justify-content: center;
 53}
 54
 55#introduction-card {
 56  background: url("assets/images/bg-lowexposure.webp");
 57  background-size: cover;
 58}
 59
 60#introduction {
 61  font-size: 64px;
 62  text-align: center;
 63}
 64
 65#introduction-sub {
 66  font-size: 32px;
 67  text-align: center;
 68}
 69
 70#project-card-1 {
 71  background: linear-gradient(
 72    90deg,
 73    #180f24 0%,
 74    #180f24 50%,
 75    rgba(0, 0, 0, 1) 100%
 76  );
 77}
 78
 79#project-card-2 {
 80  background: linear-gradient(
 81    90deg,
 82    #180f24 0%,
 83    #180f24 50%,
 84    rgba(0, 0, 0, 1) 100%
 85  );
 86}
 87
 88#project-card-4 {
 89  background: linear-gradient(
 90    90deg,
 91    rgba(146, 145, 143, 1) 0%,
 92    rgba(146, 145, 143, 1) 50%,
 93    rgba(0, 0, 0, 1) 100%
 94  );
 95}
 96
 97#project-card-5 {
 98  background: black;
 99}
100
101#hireme-card {
102  position: relative;
103  background: url("assets/images/HireMe/image-lowexp.webp");
104  background-size: cover;
105  background-position: center;
106}
107
108#hireme-content {
109  position: absolute;
110  background: url("assets/images/HireMe/image-blur-lowexp.webp");
111  background-size: cover;
112  background-position: center;
113  top: 12.5vh;
114  left: 12.5vw;
115  width: 75vw;
116  height: 75vh;
117}
118
119#hireme-text {
120  position: relative;
121  top: 50%;
122  transform: translateY(-50%);
123  font-size: 48px;
124  text-align: center;
125  padding: 36px;
126}
127
128#hireme-text-1 {
129  font-size: 64px;
130}
131
132#credits-card {
133  background: url("assets/images/bg4-lowexposure.webp");
134  background-size: cover;
135  background-position-y: center;
136}
137
138#credits-title {
139  font-size: 64px;
140  padding: 50px 25px 0px 25px;
141  text-align: center;
142}
143
144#credits-text {
145  text-align: center;
146}
147
148.credits-part {
149  width: 100%;
150  text-align: center;
151}
152
153.credits-part-title {
154  font-size: 64px;
155  padding-top: 48px;
156}
157
158.credits-names {
159  font-size: 48px;
160}
161
162#copyright {
163  font-size: 16px;
164  text-align: center;
165  position: absolute;
166  bottom: 10px;
167  left: 0;
168  width: 100%;
169}
170
171.bold-text {
172  font-weight: 400;
173}
174
175.project-title {
176  font-size: 64px;
177  text-align: center;
178}
179
180.project-link {
181  position: absolute;
182  bottom: 30px;
183  right: 30px;
184}
185
186.project-link-icon {
187  width: 32px;
188  height: 32px;
189}
190
191.project-flex {
192  display: flex;
193}
194
195.project-right {
196  margin-left: 15px;
197  padding: 10px;
198}
199
200.project-properties {
201  position: absolute;
202  bottom: 0;
203  padding: 15px;
204  font-size: 24px;
205}
206
207.project-image {
208  height: 100vh;
209  width: calc(90vw - 300px);
210  object-fit: cover;
211}
212
213.project-description {
214  padding: 15px;
215  font-size: 48px;
216  margin-bottom: 4px;
217}
218
219#side-navbar {
220  position: absolute;
221  top: 0;
222  left: -190px;
223  height: 100vh;
224  width: 200px;
225  background: transparent;
226  cursor: default;
227  transition: left 1s ease, background 1s ease;
228}
229
230#side-navbar:hover {
231  left: 0;
232  background: #000000aa;
233}
234
235#side-navbar:hover > #side-navbar-icon {
236  opacity: 0;
237  right: -80px;
238}
239
240#side-navbar-icon {
241  width: 32px;
242  height: 32px;
243  position: absolute;
244  right: -30px;
245  top: calc(50vh - 32px);
246  opacity: 1;
247  transition: opacity 0.5s ease, right 1s ease;
248}
249
250.side-navbar-button {
251  width: 100%;
252  height: 12px;
253  font-size: 12px;
254  text-align: center;
255  padding: 12px 0px 12px 0px;
256  line-height: 10px;
257  transition: background 0.5s ease, color 0.5s ease;
258}
259
260.side-navbar-button:hover {
261  background: #ffffffaa;
262  color: black;
263}
264
265.sidebar-header {
266  margin-left: 10px;
267}
268
269.sidebar-separator {
270  width: calc(100% - 10px);
271  height: 1px;
272  background: linear-gradient(
273    90deg,
274    rgba(255, 255, 255, 1) 20%,
275    rgba(255, 255, 255, 0) 100%
276  );
277}
278
279.sidebar-link {
280  color: #ffffff;
281  text-decoration: none;
282}
283
284#side-navbar-bottom {
285  position: absolute;
286  bottom: 10px;
287  width: inherit;
288  display: flex;
289  flex-direction: row;
290}
291
292.side-navbar-contact-div {
293  flex-grow: 1;
294  text-align: center;
295}
296
297.side-navbar-contact-icon {
298  width: 24px;
299}
300
301#loading-screen {
302  position: absolute;
303  top: 0;
304  left: 0;
305  width: 100vw;
306  height: 100vh;
307  background: black;
308  font-family: "Source Code Pro";
309  opacity: 1;
310  transition: opacity 0.5s ease;
311}
312
313#svg5 {
314  position: absolute;
315  top: -400px;
316  left: 70px;
317}
318
319#loading-icon {
320  fill: transparent;
321  stroke-width: 0.2px;
322  stroke-dasharray: 0% 100% 100%;
323  transition: stroke-dasharray 1s cubic-bezier(0, 0, 1, 0),
324    fill 0.5s cubic-bezier(0, 0, 1, 0);
325  stroke: white;
326}
327
328#loading-progress {
329  position: absolute;
330  top: 200px;
331  left: 100px;
332  font-size: 128px;
333}
334
335#loading-progressbar {
336  position: absolute;
337  top: 400px;
338  left: 100px;
339  width: calc(100vw - 200px);
340  height: 64px;
341  background-color: #0000004a;
342  border: white 1px solid;
343}
344
345#loading-progressbar-inner {
346  height: 64px;
347  width: 0%;
348  background: white;
349  transition: width 0.02s linear;
350}
351
352#connection-status {
353  position: absolute;
354  top: 600px;
355  left: 100px;
356  font-size: 24px;
357  color: white;
358  opacity: 1;
359  transition: opacity 0.2s ease;
360}
361#loading-console {
362  position: absolute;
363  top: 50px;
364  left: 50px;
365  width: calc(100vw - 100px);
366  height: calc(100vh - 100px);
367  color: #2b2b2b;
368  overflow: hidden;
369  scroll-behavior: smooth;
370}
371#Yuki-I-text {
372  position: absolute;
373  right: 50px;
374  text-align: right;
375  top: 100px;
376  font-size: 24px;
377}
378.Yuki-I-text-character {
379  position: relative;
380}
381.Yuki-I-text-character-load-left {
382  animation: yukiloadleft 0.5s ease;
383}
384.Yuki-I-text-character-load-right {
385  animation: yukiloadright 0.5s ease;
386}
387
388.Yuki-I-text-character-furigana {
389  position: absolute;
390  left: 24px;
391  font-size: 12px;
392  top: 0px;
393}
394
395@keyframes yukiloadleft {
396  0% {
397    transform: translateX(-32px) translateY(32px);
398  }
399  50% {
400    transform: translateX(-32px) translateY(0px);
401  }
402  100% {
403    transform: translateX(0px) translateY(0px);
404  }
405}
406@keyframes yukiloadright {
407  0% {
408    transform: translateX(32px) translateY(-32px);
409  }
410  50% {
411    transform: translateX(32px) translateY(0px);
412  }
413  100% {
414    transform: translateX(0px) translateY(0px);
415  }
416}