.clock{margin:40px;position:relative;width:100px;height:100px}.clock-bg{border:4px solid #aaa;width:100%;height:100%;border-radius:50%;position:relative;text-align:center}.v-clock-dark{width:200px;height:200px;background-color:#282828;position:relative}.clock-bg-dark{margin-top:50%;width:100%;height:100%;border-radius:50%;position:relative;border:7px solid #282828;box-shadow:-4px -4px 10px rgba(67,67,67,.5),inset 4px 4px 10px rgba(0,0,0,.5),inset -4px -4px 10px rgba(67,67,67,.5),4px 4px 10px rgba(0,0,0,.3)}.clock-bg>div{height:96%;width:4px;background-color:#aaa;position:absolute;top:2%;left:50%;margin-left:-2px}.clock-bg-dark:after,.clock-bg:after{content:"";width:80%;height:80%}.clock-bg>div:nth-child(2){transform:rotate(30deg)}.clock-bg>div:nth-child(3){transform:rotate(60deg)}.clock-bg>div:nth-child(4){transform:rotate(90deg)}.clock-bg>div:nth-child(5){transform:rotate(120deg)}.clock-bg>div:nth-child(6){transform:rotate(150deg)}.clock-bg-dark>div:nth-child(1){background-color:#1df52f}.clock-bg-dark>div:nth-child(4){background-color:#1df52f;transform:rotate(90deg)}.clock-bg-dark:after,.clock-bg:after,.clock-dot{border-radius:50%;top:50%;transform:translate(-50%,-50%);position:absolute}.clock-bg:after{background-color:#fff;left:50%}.clock-bg-dark:after{background-color:#282828;left:50%}.clock-dot,.clock-point{background-color:#000;left:50%}.clock-dot{width:10px;height:10px}.clock-point{height:50%;width:4px;position:absolute;bottom:50%;transform-origin:50% bottom}.clock-point.clock-point--hour{height:20%;width:6px}.clock-point.clock-point--minute{height:30%}.clock-point.clock-point--second{height:40%;width:2px;background-color:#f50}