body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{height:100vh;width:100%;position:relative}#clock-wrap,#clock-wrap div{box-sizing:border-box;padding:0;margin:0}#clock-wrap{inset:0;position:absolute}#face-frame{border:3px solid black;background-color:#fff;border-radius:50%}.face-line1,.face-line2{position:absolute;left:0;z-index:1}.face-line1{width:7px;height:3px;background:#000;top:calc(50% - 2px)}.face-line2{width:5px;height:2px;background:#000;top:calc(50% - 1px)}.face-text{color:#000;font-size:2em;position:absolute;transform:translate(-50%,-50%);z-index:2}.face-center,.face-center:after{border-radius:50%;position:absolute}.face-center{top:50%;left:50%;z-index:15;background-color:#282828;height:21px;width:21px;transform:translate(-50%,-50%)}.face-center:after{content:"";background-color:silver;top:2px;left:2px;height:17px;width:17px}#hand-second{--react-analog-clock-handlengthper:85;--react-analog-clock-handgapper:20;background-color:red;width:5px;position:absolute;z-index:10;border-radius:5px}#hand-minute{--react-analog-clock-handlengthper:80;--react-analog-clock-handgapper:10;background-color:#000;width:14px;position:absolute;z-index:9;border-radius:5px}#hand-hour{--react-analog-clock-handlengthper:55;--react-analog-clock-handgapper:10;background-color:#000;width:20px;position:absolute;z-index:8;border-radius:5px}#clock-info{position:absolute;width:120px;padding:5px;font-size:.8em;top:0;right:0;background-color:#282828;color:#fff}#clock-info p{margin:0}#clock-info a{color:#0ff}