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;