:root{--clock-diameter:300px;--clock-border:20px}a:link,a:visited{color:inherit}a,a:link,a:visited{text-decoration:none}a{position:relative;font-weight:700}a:before{content:"";position:absolute;width:0;height:2px;bottom:0;left:0;background-color:#333;transition:width .3s ease}a:hover:before{width:100%}.clock{width:var(--clock-diameter);height:var(--clock-diameter);border-radius:50%;background-color:#faebd7;margin:auto;position:relative;border:var(--clock-border) solid #fff8dc}.center{--diameter:20px;left:calc(50% - (var(--diameter) / 2));top:calc(50% - (var(--diameter) / 2));width:var(--diameter);height:var(--diameter);border-radius:50%;z-index:20}.center,.hourHand{background-color:#000;position:absolute}.hourHand{--width:10px;width:var(--width);height:75px;transform-origin:bottom center;border-radius:4px;bottom:calc((var(--clock-diameter) / 2) - var(--clock-border));left:calc(((var(--clock-diameter) - var(--width)) / 2) - var(--clock-border));z-index:8}.minuteHand{--width:5px;background-color:#000;z-index:9}.minuteHand,.secondHand{width:var(--width);height:120px;transform-origin:bottom center;border-radius:4px;position:absolute;bottom:calc((var(--clock-diameter) / 2) - var(--clock-border));left:calc(((var(--clock-diameter) - var(--width)) / 2) - var(--clock-border))}.secondHand{--width:2px;background-color:red;z-index:10}#significantEventLineContainer{text-align:center}.significantEventLine{padding:0 2px;--width:2px;width:var(--width);height:calc(var(--clock-diameter) / 2);background-color:grey;transform-origin:bottom center;border-radius:4px;position:absolute;bottom:calc((var(--clock-diameter) / 2) - var(--clock-border));left:calc(((var(--clock-diameter) - var(--width)) / 2) - var(--clock-border));z-index:10;transform:rotate(90deg);box-sizing:border-box}.significantEventLine:hover{background-color:red}.hourDiv .significantEventTooltip,.significantEventLine .significantEventTooltip{visibility:hidden;width:200px;background-color:#555;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-100px;opacity:0;transition:opacity .3s;font-size:14px;font-weight:400}.hourDiv:hover .significantEventTooltip,.significantEventLine:hover .significantEventTooltip{visibility:visible;opacity:1}.digitalTime{position:absolute;top:45%;left:10%;border:1px solid #fff8dc;background-color:#fff;box-shadow:inset 0 2px 5px rgba(0,0,0,.4);border-radius:5px}.digitalTime small{color:red;transition:all .05s;transition-timing-function:cubic-bezier(.1,2.7,.58,1)}.clock ul{list-style:none;padding:0}.clock ul li{position:absolute;width:20px;height:20px;text-align:center;line-height:20px;font-size:10px;color:red}.clock ul li:first-child{right:22%;top:6.5%}.clock ul li:nth-child(2){right:6%;top:25%}.clock ul li:nth-child(3){right:1%;top:calc(50% - 10px);color:#000;font-size:20px;font-weight:700}.clock ul li:nth-child(4){right:6%;top:69%}.clock ul li:nth-child(5){right:22%;top:84%}.clock ul li:nth-child(6){right:calc(50% - 10px);top:calc(99% - 20px);color:#000;font-size:20px;font-weight:700}.clock ul li:nth-child(7){left:22%;top:84%}.clock ul li:nth-child(8){left:6%;top:69%}.clock ul li:nth-child(9){left:1%;top:calc(50% - 10px);color:#000;font-size:20px;font-weight:700}.clock ul li:nth-child(10){left:6%;top:25%}.clock ul li:nth-child(11){left:22%;top:6.5%}.clock ul li:nth-child(12){right:calc(50% - 10px);top:1%;color:#000;font-size:20px;font-weight:700}