Add hands css

main.css

@@ -11,10 +11,52 @@ body {
     height: 300px;
     background-color: #adadad;
     border-radius: 50%;
-    border: 1px solid black;
+    border: 2px solid #000000;
     position: relative;
 }
 
+.clock .hands {
+    --rotation: 0;
+    position: absolute;
+    bottom: 50%;
+    left: 50%;
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
+    transform-origin: bottom;
+    transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
+}
+
+.clock .hands.hrs {
+    width: 6px;
+    height: 25%;
+    background-color: #000000;
+}
+
+.clock .hands.min {
+    width: 4px;
+    height: 35%;
+    background-color: #000000;
+}
+
+.clock .hands.sek {
+    width: 2px;
+    height: 42%;
+    background-color: #ff0000;
+}
+
+.clock .dot {
+    position: absolute;
+    background-color: #000000;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    border: 2px solid #ff0000;
+    z-index: 10;
+}
+
 .clock .nums {
     --rotation: 0;
     position: absolute;