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:wght@200;300;400;500;700;900&display=swap');
  3@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic');
  4
  5::-webkit-scrollbar {
  6    width: 10px;
  7}
  8
  9::-webkit-scrollbar-track-piece {
 10    background-color: #393939;
 11}
 12
 13::-webkit-scrollbar-thumb {
 14    background-color: #FFFFFF;
 15}
 16
 17html {
 18    scrollbar-color: #ffffff #393939;
 19    scrollbar-width: thin;
 20    --bit-length: 2;
 21}
 22
 23body {
 24    position: relative;
 25    margin: 0;
 26    font-family: "Source Sans Pro";
 27    color: white;
 28    background:#000000;
 29    font-weight: 200;
 30    text-shadow: 0px 0px 5px black;
 31    width: 100vw;
 32    height: 100vh;
 33}
 34#container {
 35    position: relative;
 36    width: 100%;
 37    height: 100vh;
 38    overflow: hidden;
 39}
 40#input-container{
 41    position: absolute;
 42    left: 64px;
 43    top: 64px;
 44    display: flex;
 45}
 46#result-container{
 47    position: absolute;
 48    left: 64px;
 49    top: 128px;
 50    display: flex;
 51}
 52.bit-div{
 53    position: relative;
 54    animation: bitLoadIn 0.2s ease;
 55    font-size: 64px;
 56}
 57.result-bit-div{
 58    position: relative;
 59    animation: resultbitLoadIn 0.2s ease;
 60    font-size: 64px;
 61}
 62.bitLoadOut{
 63    animation: bitLoadOut 0.2s ease;
 64}
 65#convert-button{
 66    position: absolute;
 67    left: 64px;
 68    bottom: 64px;
 69    border: white 1px solid;
 70    padding: 16px;
 71    font-size: 32px;
 72    overflow: hidden;
 73    background: black;
 74}
 75#convert-button-effect{
 76    position: absolute;
 77    top:0;
 78    left:0;
 79    background: white;
 80    color:white;
 81    backdrop-filter: invert(1);
 82    padding: 16px;
 83    transition: transform 0.1s ease;
 84    transform: translate(0,80px);
 85}
 86#convert-button:hover > #convert-button-effect { 
 87    transform: translate(0,0px);
 88}
 89.bit-value-div{
 90    font-size: 16px;
 91    position: absolute;
 92    top:64px;
 93    left:0px;
 94    animation: bitValueLoadIn 1s ease;
 95}
 96.bit-value-div-disabled{
 97    opacity: 0;
 98    animation: none;
 99}
100.bit-value-calculating{
101    animation: bitValueCalculating 1s ease;
102    transform: translate(calc(var(--bit-length) * -30.2px - 64px), 0px);
103}
104#home-link{
105    position: absolute;
106    top: 40px;
107    right: 40px;
108}
109#home-link-a{
110    color: white;
111    text-decoration: none;
112font-size: 32px;
113font-weight: 400;
114}
115#home-icon{
116    width: 32px;
117    height: 32px;
118}
119
120@keyframes bitValueCalculating {
121    from{
122        transform: translate(0vw, 0px) scaleX(1);
123    }
124    to{
125        transform: translate(calc(var(--bit-length) * -30.2px - 64px), 0px) scaleX(2);
126    }
127}
128
129
130@keyframes bitValueLoadIn {
131    from{
132        transform: translate(0vw, -64px) scaleY(2);
133        opacity: 0;
134    }
135    to{
136        transform: translate(0vw, 0vh) scaleY(1);
137        opacity: 1;
138    }
139}
140
141@keyframes resultbitLoadIn {
142    from{
143        transform: translate(-256px, -64px) scale(0.1);
144        opacity: 0;
145    }
146    to{
147        transform: translate(0px, 0vh) scale(1);
148        opacity: 1;
149    }
150}
151
152@keyframes bitLoadIn {
153    from{
154        transform: translate(100vw, 0vh) scaleX(2);
155        opacity: 0;
156    }
157    to{
158        transform: translate(0vw, 0vh) scaleX(1);
159        opacity: 1;
160    }
161}
162
163@keyframes bitLoadOut {
164    from{
165        transform: translate(0vw, 0vh);
166        opacity: 1;
167    }
168    to{
169        transform: translate(100vw, 0vh);
170        opacity: 0;
171    }
172}