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#container {
32 position: relative;
33 width: 100%;
34 height: 100vh;
35 scroll-snap-type: y mandatory;
36 overflow-y: scroll;
37}
38#home-link{
39position: absolute;
40top: 40px;
41right: 40px;
42}
43#home-link-a{
44 color: white;
45 text-decoration: none;
46font-size: 32px;
47font-weight: 400;
48}
49#home-icon{
50 width: 32px;
51 height: 32px;
52}
53#clock{
54 position: absolute;
55top: calc(50vh - 250px);
56left: calc(50vw - 250px);
57height: 500px;
58width: 500px;
59border: white solid 1px;
60}
61
62#clock-second-hand{
63 position: absolute;
64width: 1px;
65height: 250px;
66background: white;
67transform: rotate(360deg);
68 transform-origin: top center;
69 top:249.5px;
70 left:249.5px;
71 transition: transform 0.05s cubic-bezier(.95,.05,.97,1.28);
72 animation: line-load 1s linear;
73}
74#clock-minute-hand{
75 position: absolute;
76width: 2px;
77height: 200px;
78background: white;
79transform: rotate(360deg);
80 transform-origin: top center;
81 top:249px;
82 left:249px;
83 transition: transform 0.05s cubic-bezier(.95,.05,.97,1.28);
84 animation: line-load 1s linear;
85}
86#clock-hour-hand{
87 position: absolute;
88width: 4px;
89height: 150px;
90background: white;
91transform: rotate(360deg);
92 transform-origin: top center;
93 top:248px;
94 left:248px;
95 transition: transform 0.05s cubic-bezier(.95,.05,.97,1.28);
96 animation: line-load 1s linear;
97}
98.clock-face-line{
99 position: absolute;
100width: 4px;
101height: 50px;
102background: white;
103transform: rotate(360deg);
104 transform-origin: top center;
105 animation: line-load 1s linear;
106}
107
108@keyframes line-load {
109 0%{
110 opacity: 0;
111 }
112 100%{
113 opacity: 1;
114 }
115}