*{padding:0;margin:0;box-sizing:border-box}:root{--clock-font: "Orbitron", monospace;--off-color: #131313;--on-color: #1ce601;--secondary-color: #222020;--segment-l: 45px;--segment-w: 12px}#root{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background-color:var(--secondary-color);background:radial-gradient(circle,var(--secondary-color) 0%,#000000 100%)}.number{display:grid;grid-template-columns:var(--segment-w) var(--segment-l) var(--segment-l) var(--segment-w);grid-template-rows:var(--segment-w) var(--segment-l) var(--segment-l) var(--segment-w) var(--segment-l) var(--segment-l) var(--segment-w);grid-template-areas:". top top . " "left-top . . right-top" "left-top . . right-top" ". mid mid ." "left-bot . . right-bot" "left-bot . . right-bot" ". bot bot ."}.number-pairs{display:flex;gap:1rem}div.on{background-color:var(--on-color);box-shadow:0 0 2px var(--on-color),0 0 10px var(--on-color),0 0 5px #adff2f;border-radius:2px;transition:background-color .2s ease,box-shadow .2s ease;animation:flicker 1s infinite}.bar{background-color:var(--off-color);border-radius:2px;box-shadow:inset 0 0 3px #3f3c3c}.bar{background-color:var(--off-color)}.barA{grid-area:top}.barB{grid-area:right-top}.barC{grid-area:right-bot}.barD{grid-area:bot}.barE{grid-area:left-bot}.barF{grid-area:left-top}.barG{grid-area:mid}#clock{display:flex;justify-content:center;align-items:center;gap:1rem}.separator>p,.am-pm{font-family:var(--clock-font)}.separator>p,.l.on{text-shadow:0 0 2px var(--on-color),0 0 15px var(--on-color),0 0 5px greenyellow;border-radius:2px;transition:color .2s ease,text-shadow .2s ease}.separator>p{display:flex;font-size:150px;padding-bottom:25px;color:var(--on-color);animation:blink 1s steps(1) infinite}.am-pm{display:flex;height:100%;flex-direction:column;padding-top:100px;padding-bottom:100px;padding-right:50px;gap:4rem;color:var(--on-color)}.l{font-size:20px;color:var(--off-color);text-align:center}.l.on{color:var(--on-color)}.l:before{content:"●";font-size:20px;margin-right:10px;position:relative;top:-3px}@keyframes flicker{0%,to{opacity:1}98%{opacity:.9}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}
