@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color:#f6f7fb;--white-color:#fff;--black-color:#18191a;--red-color:#e74c3c}body.dark{--primary-color:#242526;--white-color:#18191a;--black-color:#fff;--red-color:#e74c3c}.analogic{display:flex;flex-direction:column;align-items:center;padding:.5vh;ga1p:360px}.analogic .clock{display:flex;height:7vh;width:7vh;border-radius:50%;align-items:center;justify-content:center;background:var(--white-color);position:relative;font-family:"Inter",sans-serif}.clock label{position:absolute;inset:-6px;text-align:center;transform:rotate(calc(var(--i)*(360deg/12)))}.clock label span{display:inline-block;font-size:9px;font-weight:600;color:var(--black-color);transform:rotate(calc(var(--i)*(-360deg/12)))}.analogic .indicator{position:absolute;height:5px;width:5px;display:flex;justify-content:center}.indicator::before{content:"";position:absolute;height:100%;width:100%;border-radius:50%;z-index:100;background:var(--black-color);border:4px solid var(--red-color)}.indicator .hand{position:absolute;height:24px;width:2px;bottom:0;border-radius:25px;transform-origin:bottom;background-color:#f00}.hand.minute{height:21px;width:4px;background-color:#000}.hand.hour{height:17px;width:6px;background-color:#000}