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(90deg, rgba(40, 44, 52, 1) 0%, rgba(40, 44, 52, 1) 50%, rgba(0, 0, 0, 1) 100%);
 72}
 73
 74#project-card-2 {
 75    background: black;
 76}
 77
 78#hireme-card {
 79    position: relative;
 80    background: url('/assets/images/HireMe/image-lowexp.webp');
 81    background-size: cover;
 82    background-position: center;
 83}
 84
 85#hireme-content {
 86    position: absolute;
 87    background: url('/assets/images/HireMe/image-blur-lowexp.webp');
 88    background-size: cover;
 89    background-position: center;
 90    top: 12.5vh;
 91    left: 12.5vw;
 92    width: 75vw;
 93    height: 75vh;
 94}
 95
 96#hireme-text {
 97    position: relative;
 98    top: 50%;
 99    transform: translateY(-50%);
100    font-size: 48px;
101    text-align: center;
102    padding: 36px;
103}
104
105#hireme-text-1 {
106    font-size: 64px;
107}
108
109#credits-card {
110    background: url('/assets/images/bg4-lowexposure.webp');
111    background-size: cover;
112    background-position-y: center;
113}
114
115#credits-title {
116    font-size: 64px;
117    padding: 50px 25px 0px 25px;
118    text-align: center;
119}
120
121#credits-text {
122    text-align: center;
123}
124
125.credits-part {
126    width: 100%;
127    text-align: center;
128}
129
130.credits-part-title {
131    font-size: 64px;
132    padding-top: 48px;
133}
134
135.credits-names {
136    font-size: 48px;
137}
138
139#copyright {
140    font-size: 16px;
141    text-align: center;
142    position: absolute;
143    bottom: 10px;
144    left: 0;
145    width: 100%;
146}
147
148.bold-text {
149    font-weight: 400;
150}
151
152.project-title {
153    font-size: 64px;
154    text-align: center;
155}
156
157.project-link {
158    position: absolute;
159    bottom: 30px;
160    right: 30px;
161}
162
163.project-link-icon {
164    width: 32px;
165    height: 32px;
166}
167
168.project-flex {
169    display: flex;
170}
171
172.project-right {
173    margin-left: 15px;
174    padding: 10px;
175}
176
177.project-properties {
178    position: absolute;
179    bottom: 0;
180    padding: 15px;
181    font-size: 24px;
182}
183
184.project-image {
185    height: 100vh;
186    width: calc(90vw - 300px);
187    object-fit: cover;
188}
189
190.project-description {
191    padding: 15px;
192    font-size: 48px;
193    margin-bottom: 4px;
194}
195
196#side-navbar {
197    position: absolute;
198    top: 0;
199    left: -190px;
200    height: 100vh;
201    width: 200px;
202    background: transparent;
203    cursor: default;
204    transition: left 1s ease, background 1s ease;
205}
206
207#side-navbar:hover {
208    left: 0;
209    background: #000000AA;
210}
211
212#side-navbar:hover>#side-navbar-icon {
213    opacity: 0;
214    right: -80px;
215}
216
217#side-navbar-icon {
218    width: 32px;
219    height: 32px;
220    position: absolute;
221    right: -30px;
222    top: calc(50vh - 32px);
223    opacity: 1;
224    transition: opacity 0.5s ease, right 1s ease;
225}
226
227.side-navbar-button {
228    width: 100%;
229    height: 25px;
230    font-size: 25px;
231    text-align: center;
232    padding: 25px 0px 25px 0px;
233    line-height: 23px;
234    transition: background 0.5s ease, color 0.5s ease;
235}
236
237.side-navbar-button:hover {
238    background: #FFFFFFAA;
239    color: black;
240}
241
242.sidebar-header{
243    margin-left: 10px;
244}
245
246.sidebar-separator {
247    width: calc(100% - 10px);
248    height: 1px;
249    background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);
250}
251
252.sidebar-link {
253    color: #FFFFFF;
254    text-decoration: none;
255}
256
257#side-navbar-bottom {
258    position: absolute;
259    bottom: 10px;
260    width: inherit;
261    display: flex;
262    flex-direction: row;
263}
264
265.side-navbar-contact-div {
266    flex-grow: 1;
267    text-align: center;
268}
269
270.side-navbar-contact-icon {
271    width: 24px;
272}
273
274#loading-screen {
275    position: absolute;
276    top: 0;
277    left: 0;
278    width: 100vw;
279    height: 100vh;
280    background: black;
281    font-family: "Source Code Pro";
282    opacity: 1;
283    transition: opacity 0.5s ease;
284}
285
286#svg5{
287    position: absolute;
288    top: -400px;
289    left: 70px;
290}
291
292#loading-icon{
293    fill:transparent;
294    stroke-width: 0.2px;
295    stroke-dasharray: 0% 100% 100%;
296    transition: stroke-dasharray 1s cubic-bezier(0,0,1,0), fill 0.5s cubic-bezier(0,0,1,0);
297    stroke: white;
298}
299
300#loading-progress {
301    position: absolute;
302    top: 200px;
303    left: 100px;
304    font-size: 128px;
305}
306
307#loading-progressbar {
308    position: absolute;
309    top: 400px;
310    left: 100px;
311    width: calc(100vw - 200px);
312    height: 64px;
313    background-color: #0000004a;
314    border: white 1px solid;
315}
316
317#loading-progressbar-inner {
318    height: 64px;
319    width: 0%;
320    background: white;
321    transition: width 0.02s linear;
322}
323
324#connection-status {
325    position: absolute;
326    top: 600px;
327    left: 100px;
328    font-size: 24px;
329    color: white;
330    opacity: 1;
331    transition: opacity 0.2s ease;
332}
333#loading-console {
334    position: absolute;
335    top: 50px;
336    left: 50px;
337    width: calc(100vw - 100px);
338    height: calc(100vh - 100px);
339    color:#2b2b2b;
340    overflow: hidden;
341    scroll-behavior: smooth;
342}
343#Yuki-I-text{
344    position: absolute;
345    right: 50px;
346    text-align: right;
347    top: 100px;
348    font-size: 24px;
349}
350.Yuki-I-text-character{
351    position: relative;
352}
353.Yuki-I-text-character-load-left{
354    animation: yukiloadleft 0.5s ease;
355}
356.Yuki-I-text-character-load-right{
357    animation: yukiloadright 0.5s ease;
358}
359
360.Yuki-I-text-character-furigana {
361    position: absolute;
362    left: 24px;
363    font-size: 12px;
364    top: 0px;
365}
366
367@keyframes yukiloadleft{
368    0%{transform: translateX(-32px) translateY(32px);}
369    50%{transform: translateX(-32px) translateY(0px);}
370    100%{transform: translateX(0px) translateY(0px);}
371}
372@keyframes yukiloadright{
373    0%{transform: translateX(32px) translateY(-32px);}
374    50%{transform: translateX(32px) translateY(0px);}
375    100%{transform: translateX(0px) translateY(0px);}
376}