:root{--dig-on-clr:rgb(135,21,250);--dig-nc-clr:rgb(135,21,250);--dig-ob-clr:#c27400;--dig-ov-clr:#119600; }
.clock{height:inherit;text-align:center; }
.digit,.dig_sep{width:50px;height:100px;margin:0 5px;position:relative;display:inline-block; }
.digit .segment,
.dig_sep .segment{background:var(--dig-on-clr);position:absolute;opacity:0.15;transition:opacity 0.2s;-webkit-transition:opacity 0.2s;-ms-transition:opacity 0.2s;-moz-transition:opacity 0.2s;-o-transition:opacity 0.2s; }
.digit .segment.on,
.dig_sep .segment.on{opacity:1;box-shadow:0 0 20px 3px var(--dig-on-clr);transition:opacity 0s;-webkit-transition:opacity 0s;-ms-transition:opacity 0s;-moz-transition:opacity 0s;-o-transition:opacity 0s; }

.clock.nc{--dig-on-clr:var(--dig-nc-clr); }
.clock.ob{--dig-on-clr:var(--dig-ob-clr); }
.clock.ov{--dig-on-clr:var(--dig-ov-clr); }

.dig_sep{width:15px; }
.dig_sep .segment{width:80%;height:15%; }
.dig_sep .segment:nth-child(1){top:23%; }
.dig_sep .segment:nth-child(2){top:61%; }

.digit .segment:nth-child(2){top:   20px;right:4px; }
.digit .segment:nth-child(3){bottom:20px;right:4px; }
.digit .segment:nth-child(5){bottom:20px;left:4px; }
.digit .segment:nth-child(6){top:   20px;left:4px; }

.digit .segment:nth-child(1){top:10px;height:10px; }
.digit .segment:nth-child(4){bottom:10px;height:10px; }
.digit .segment:nth-child(7){bottom:calc(50% - 5px);height:10px; }

.digit .segment:nth-child(2),
.digit .segment:nth-child(3),
.digit .segment:nth-child(5),
.digit .segment:nth-child(6){height:calc(50% - 25px);width:10px; }

.digit .segment:nth-child(1),
.digit .segment:nth-child(4),
.digit .segment:nth-child(7){left:16px;right:16px; }

.digit .segment:nth-child(1)::before,
.digit .segment:nth-child(4)::before,
.digit .segment:nth-child(7)::before{content:"";width:8px;height:8px;display:inline-block;top:1px;left:-2px;position:absolute;background:var(--dig-on-clr);transform:rotate(45deg); }
.digit .segment:nth-child(1)::after,
.digit .segment:nth-child(4)::after,
.digit .segment:nth-child(7)::after{content:"";width:8px;height:8px;display:inline-block;top:1px;right:-2px;position:absolute;background:var(--dig-on-clr);transform:rotate(45deg); }

.digit .segment:nth-child(2)::before,
.digit .segment:nth-child(3)::before,
.digit .segment:nth-child(5)::before,
.digit .segment:nth-child(6)::before{content:"";width:8px;height:8px;display:inline-block;top:-2px;left:1px;position:absolute;background:var(--dig-on-clr);transform:rotate(45deg); }
.digit .segment:nth-child(2)::after,
.digit .segment:nth-child(3)::after,
.digit .segment:nth-child(5)::after,
.digit .segment:nth-child(6)::after{content:"";width:8px;height:8px;display:inline-block;bottom:-2px;left:1px;position:absolute;background:var(--dig-on-clr);transform:rotate(45deg); }

.dig_sep .segment.on_of{animation:blink-animation 1s infinite;-webkit-animation:blink-animation 1s infinite; }
@keyframes blink-animation{to{opacity:1; } };@-webkit-keyframes blink-animation{to{opacity:1; } }