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    overflow-y: scroll;
 37    background: black;
 38}
 39
 40#summary-card {
 41    display: flex;
 42    margin: 32px;
 43}
 44
 45.summary-header {
 46    padding: 32px;
 47    font-size: 24px;
 48}
 49.summary-link {
 50    font-size: 16px;
 51    color: white;
 52    text-decoration: none;
 53}
 54
 55#introduction-card {
 56    display: flex;
 57    margin: 64px;
 58    font-size: 16px;
 59}
 60
 61.card {
 62    margin:64px;
 63}
 64
 65.project-link {
 66    font-size: 16px;
 67    color: white;
 68    text-decoration: none;
 69}
 70
 71#loading-screen {
 72    position: absolute;
 73    top: 0;
 74    left: 0;
 75    width: 100vw;
 76    height: 100vh;
 77    background: black;
 78    font-family: "Source Code Pro";
 79    opacity: 1;
 80    transition: opacity 0.5s ease;
 81}
 82
 83#svg5{
 84    position: absolute;
 85    top: -400px;
 86    left: 70px;
 87}
 88
 89#loading-icon{
 90    fill:transparent;
 91    stroke-width: 0.2px;
 92    stroke-dasharray: 0% 100% 100%;
 93    transition: stroke-dasharray 1s cubic-bezier(0,0,1,0), fill 0.5s cubic-bezier(0,0,1,0);
 94    stroke: white;
 95}
 96
 97#loading-progress {
 98    position: absolute;
 99    top: 200px;
100    left: 100px;
101    font-size: 128px;
102}
103
104#loading-progressbar {
105    position: absolute;
106    top: 400px;
107    left: 100px;
108    width: calc(100vw - 200px);
109    height: 64px;
110    background-color: #0000004a;
111    border: white 1px solid;
112}
113
114#loading-progressbar-inner {
115    height: 64px;
116    width: 0%;
117    background: white;
118    transition: width 0.02s linear;
119}
120
121#connection-status {
122    position: absolute;
123    top: 600px;
124    left: 100px;
125    font-size: 24px;
126    color: white;
127    opacity: 1;
128    transition: opacity 0.2s ease;
129}
130#loading-console {
131    position: absolute;
132    top: 50px;
133    left: 50px;
134    width: calc(100vw - 100px);
135    height: calc(100vh - 100px);
136    color:#2b2b2b;
137    overflow: hidden;
138    scroll-behavior: smooth;
139}
140#Yuki-I-text{
141    position: absolute;
142    right: 50px;
143    text-align: right;
144    top: 100px;
145    font-size: 24px;
146}
147.Yuki-I-text-character{
148    position: relative;
149}
150.Yuki-I-text-character-load-left{
151    animation: yukiloadleft 0.5s ease;
152}
153.Yuki-I-text-character-load-right{
154    animation: yukiloadright 0.5s ease;
155}
156
157.Yuki-I-text-character-furigana {
158    position: absolute;
159    left: 24px;
160    font-size: 12px;
161    top: 0px;
162}
163
164@keyframes yukiloadleft{
165    0%{transform: translateX(-32px) translateY(32px);}
166    50%{transform: translateX(-32px) translateY(0px);}
167    100%{transform: translateX(0px) translateY(0px);}
168}
169@keyframes yukiloadright{
170    0%{transform: translateX(32px) translateY(-32px);}
171    50%{transform: translateX(32px) translateY(0px);}
172    100%{transform: translateX(0px) translateY(0px);}
173}