clock position fix

src/css/clock.css

@@ -2,27 +2,46 @@
     position: fixed;
     display: flex;
     flex-direction: row;
-    gap: 10px;
-    overflow-y: hidden;
+    /* gap: 10px; */
+    overflow: hidden;
     align-items: start;
     justify-content: start;
     height: 100px;
     transition: opacity .2s;
     /* opacity: 0; */
     mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent );
-} #clock > .digit {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    justify-content: start;
-    transition: transform .4s;
-    gap: 0;
-} #clock > .digit > span {
-    font-weight: 800;
-    font-size: 80px;
-    font-family: 'Nunito';
-    margin: 0;
-    padding: 0;
-} #clock > .digit.l {
-    transform: translateY(-7px);
+    
+    .digit {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        justify-content: start;
+        transition: transform .4s;
+        gap: 0;
+
+        span {
+            font-weight: 800;
+            font-size: 80px;
+            height: 100px;
+            font-family: 'Nunito';
+            margin: 0;
+            padding: 0;
+        }
+    }
+    :not(.l) {
+        margin: 0 3px;
+    }
+    .l {
+        opacity: 0.5;
+        transform: translateY(-2px);
+        width: auto !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        span {
+            font-weight: normal;
+            height: auto !important;
+        }
+    }
 } 

src/js/builtin.js

@@ -1,6 +1,6 @@
 const clock = async () => {
     const render = async () => {
-        const baseOffset = 109.12
+        const baseOffset = 100
         const tsp = number => (number < 10 ? `0${number}` : `${number}`).split('').map(e => parseInt(e)*baseOffset)
         const time = new Date()
         var ft = [tsp(time.getHours()), tsp(time.getMinutes()), tsp(time.getSeconds())].flat()