.digital-clock{width:var(--clock-size);height:calc(var(--clock-size) * .3);background-color:var(--clock-bg);color:var(--clock-fg);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:calc(var(--clock-size) * .06);border-radius:calc(var(--clock-size) * .02);font:calc(var(--clock-size) * .05)/1.3 Arial,sans-serif;gap:calc(var(--clock-size) * .05)}.digital-clock .top{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:calc(var(--clock-size) * .015);width:100%}.digital-clock .bottom{display:flex;flex-direction:row;gap:calc(var(--clock-size) * .03);width:100%}.digital-clock:hover{background-color:var(--clock-hover)}.digital-time{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:75%;width:85%;gap:calc(var(--clock-size) * .05);padding-left:1em}.digital-time .colon{height:100%;align-content:center;font-size:calc(var(--clock-size) * .1);font-weight:700}.digital-number{position:relative;width:calc(var(--clock-size) * .1);height:calc(var(--clock-size) * .2)}.digital-number span{position:absolute;background:var(--clock-fg);transition:background .2s ease}.digital-number span:hover{background:var(--clock-hover)}.digital-number span.on{opacity:1}.digital-number span.off{opacity:0}.digital-number .horizontal{height:calc(var(--clock-size) * .015);width:100%;left:0}.digital-number .vertical{height:50%;width:calc(var(--clock-size) * .015)}.digital-number .top{top:-2.5%;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%)}.digital-number .top.right,.digital-number .top.left{top:2.5%}.digital-number .mid{top:50%;clip-path:polygon(15% 0%,85% 0%,100% 50%,85% 100%,15% 100%,0% 50%)}.digital-number .bottom{top:102.5%;clip-path:polygon(15% 0%,85% 0%,100% 100%,0% 100%)}.digital-number .bottom.right,.digital-number .bottom.left{top:55%}.digital-number .left{left:-5%;clip-path:polygon(0 0,100% 10%,100% 90%,0% 100%)}.digital-number .right{right:-5%;clip-path:polygon(0 10%,100% 0,100% 100%,0 90%)}.weekdays{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;gap:1em;font-size:calc(var(--clock-size) * .045);font-weight:700}.ampm{display:flex;flex-direction:column;justify-content:center;align-items:center}