From 28a85251817dd7dd3ccd28418c43854cdc0eaca8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9DNyymix=E2=80=9D?= <nyymix@gmail.com>
Date: Mon, 25 Apr 2022 10:49:08 +0300
Subject: [PATCH] Add hands css

---
 main.css | 44 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/main.css b/main.css
index cc6fbbc..ab01db6 100644
--- a/main.css
+++ b/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;