1@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;500;700;900&display=swap');
  2
  3::-webkit-scrollbar {
  4    width: 10px;
  5}
  6
  7::-webkit-scrollbar-track-piece {
  8    background-color: #393939;
  9}
 10
 11::-webkit-scrollbar-thumb {
 12    background-color: #FFFFFF;
 13}
 14
 15html {
 16    scrollbar-color: #ffffff #393939;
 17    scrollbar-width: thin;
 18}
 19
 20body {
 21    position: relative;
 22    margin: 0;
 23    font-family: "Source Sans Pro";
 24    color: white;
 25    background: #000000;
 26    font-weight: 200;
 27    text-shadow: 0px 0px 5px black;
 28    width: 100vw;
 29    height: 100vh;
 30}
 31
 32#container {
 33    position: absolute;
 34    top: 0;
 35    left: 0;
 36    width: 100vw;
 37    height: 100vh;
 38}
 39
 40#schedule-categories {
 41    display: flex;
 42    padding: 112px;
 43}
 44
 45.schedule-category{
 46    width: 100%;
 47}
 48.schedule-category-object {
 49    position: relative;
 50    border: white 1px solid;
 51    padding: 32px;
 52    margin: 32px;
 53    animation: loadIn 0.2s ease;
 54}
 55
 56.schedule-category-title{
 57    text-align: center;
 58    animation: loadIn 0.2s ease;
 59}
 60
 61.schedule-category-object-move-button{
 62    position: absolute;
 63    top:8px;
 64    right:32px;
 65    animation: loadIn 0.2s ease;
 66}
 67
 68.schedule-category-object-completed-button{
 69    position: absolute;
 70    top:8px;
 71    right:8px;
 72    animation: loadIn 0.2s ease;
 73}
 74
 75#home-link {
 76    position: absolute;
 77    top: 40px;
 78    right: 40px;
 79}
 80
 81#home-link-a {
 82    color: white;
 83    text-decoration: none;
 84    font-size: 32px;
 85    font-weight: 400;
 86}
 87
 88#home-icon {
 89    width: 32px;
 90    height: 32px;
 91}
 92
 93#stopwatch-button {
 94    position: absolute;
 95    top: 40px;
 96    left: 40px;
 97}
 98
 99#stopwatch-icon {
100    width: 32px;
101    height: 32px;
102}
103
104#stopwatch-sidebar {
105    position: absolute;
106    background: #000000;
107    width: 480px;
108    height: calc(100vh - 2px);
109    top: 0px;
110    left: -482px;
111    border: transparent 1px solid;
112    transition: left 1s ease, border 1s ease;
113    text-align: center;
114}
115
116.stopwatch-control-button-row{
117    display: flex;
118    position: absolute;
119    left: 50%;
120    -webkit-transform: translateX(-50%);
121    transform: translateX(-50%);
122}
123#stopwatch-control-button-row-1{
124    bottom:192px;
125}
126
127.stopwatch-control-button {
128    position: relative;
129    padding: 16px;
130    border: 1px white solid;
131    color:white;
132    background-color: black;
133    transition: color 0.2s ease, background-color 0.2s ease;
134}
135
136.stopwatch-control-button:hover {
137    color:black;
138    background-color: white;
139}
140
141#stopwatch-progress-bar{
142    position: absolute;
143    left: 50%;
144    -webkit-transform: translateX(-50%);
145    transform: translateX(-50%);
146    top: calc(50vh - 32px);
147    width:320px;
148    height:32px;
149    border: white 1px solid;
150}
151
152#stopwatch-progress-bar-infill{
153    position: absolute;
154    top:0;
155    left:0;
156    width: 0px;
157    height:32px;
158    background: white;
159    transition: width 0.1s linear;
160}
161
162#stopwatch-progress-bar-text{
163    position: absolute;
164    border: white 1px solid;
165    left: 50%;
166    -webkit-transform: translateX(-50%);
167    transform: translateX(-50%);
168    top: 248px;
169    padding: 8px;
170}
171
172@keyframes loadIn {
173    from {
174        transform: translateY(16px);
175        opacity: 0;
176    }
177    to {
178        transform: translateY(0px);
179        opacity: 1;
180    }
181}