:root {
    --mouse-x: 0;
    --mouse-y: 0; }
  
  .time {
    display: flex;
    flex-direction: row;
    transform: translateZ(20px);
    transform: translateZ(20px) rotateX(calc(var(--mouse-y) * 45deg)) rotateY(calc(var(--mouse-x) * 45deg)); }
  
  * {
    transform-style: preserve-3d;
    perspective: 1000px; }
  
  .digit {
    height: 20vmin;
    width: 10vmin;
    transform-style: preserve-3d;
    perspective: 1000px;
    margin: 0 1rem; }
    .digit, .digit:after, .digit:before {
      transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1); }
    .digit:hover {
      transform: translateZ(2vmax); }
      .digit:hover:after, .digit:hover:before {
        transform: translateZ(-2vmax); }
    .digit:nth-child(2), .digit:nth-child(4) {
      margin-right: 3vmax; }
      .digit:nth-child(2):before, .digit:nth-child(2):after, .digit:nth-child(4):before, .digit:nth-child(4):after {
        content: '';
        background: white;
        display: block;
        position: absolute;
        text-align: center;
        width: 1vmax;
        height: 1vmax;
        left: calc(100% + 2vmax);
        box-shadow: 0 0 1rem #0bfd47, inset 0 0 0.25vmax #0bfd47;
        font-size: 8vmax;
        text-shadow: 0 0 1rem #0bfd47;
        animation: pulse 1s alternate cubic-bezier(0.5, 0, 0.5, 1) infinite; }
      .digit:nth-child(2):before, .digit:nth-child(4):before {
        top: 30%; }
      .digit:nth-child(2):after, .digit:nth-child(4):after {
        bottom: 30%; }
  
  @keyframes pulse {
    to {
      opacity: 0.5; } }
  
  [data-hours^="0"] .digit:nth-child(1) :nth-child(4):before, [data-hours^="0"] .digit:nth-child(1) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="0"] .digit:nth-child(2) :nth-child(4):before, [data-hours$="0"] .digit:nth-child(2) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="0"] .digit:nth-child(3) :nth-child(4):before, [data-minutes^="0"] .digit:nth-child(3) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="0"] .digit:nth-child(4) :nth-child(4):before, [data-minutes$="0"] .digit:nth-child(4) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="0"] .digit:nth-child(5) :nth-child(4):before, [data-seconds^="0"] .digit:nth-child(5) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="0"] .digit:nth-child(6) :nth-child(4):before, [data-seconds$="0"] .digit:nth-child(6) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours^="1"] .digit:nth-child(1) :nth-child(1):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours^="1"] .digit:nth-child(1) :nth-child(2):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours^="1"] .digit:nth-child(1) :nth-child(4):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours^="1"] .digit:nth-child(1) :nth-child(5):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours^="1"] .digit:nth-child(1) :nth-child(6):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="1"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="1"] .digit:nth-child(2) :nth-child(2):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="1"] .digit:nth-child(2) :nth-child(4):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="1"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="1"] .digit:nth-child(2) :nth-child(6):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="1"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="1"] .digit:nth-child(3) :nth-child(2):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="1"] .digit:nth-child(3) :nth-child(4):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="1"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="1"] .digit:nth-child(3) :nth-child(6):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="1"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="1"] .digit:nth-child(4) :nth-child(2):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="1"] .digit:nth-child(4) :nth-child(4):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="1"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="1"] .digit:nth-child(4) :nth-child(6):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="1"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="1"] .digit:nth-child(5) :nth-child(2):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="1"] .digit:nth-child(5) :nth-child(4):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="1"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="1"] .digit:nth-child(5) :nth-child(6):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="1"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="1"] .digit:nth-child(6) :nth-child(2):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="1"] .digit:nth-child(6) :nth-child(4):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="1"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="1"] .digit:nth-child(6) :nth-child(6):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours^="2"] .digit:nth-child(1) :nth-child(1):before, [data-hours^="2"] .digit:nth-child(1) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours^="2"] .digit:nth-child(1) :nth-child(7):before, [data-hours^="2"] .digit:nth-child(1) :nth-child(7):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="2"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="2"] .digit:nth-child(2) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="2"] .digit:nth-child(2) :nth-child(7):before, [data-hours$="2"] .digit:nth-child(2) :nth-child(7):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="2"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="2"] .digit:nth-child(3) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="2"] .digit:nth-child(3) :nth-child(7):before, [data-minutes^="2"] .digit:nth-child(3) :nth-child(7):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="2"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="2"] .digit:nth-child(4) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="2"] .digit:nth-child(4) :nth-child(7):before, [data-minutes$="2"] .digit:nth-child(4) :nth-child(7):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="2"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="2"] .digit:nth-child(5) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="2"] .digit:nth-child(5) :nth-child(7):before, [data-seconds^="2"] .digit:nth-child(5) :nth-child(7):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="2"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="2"] .digit:nth-child(6) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="2"] .digit:nth-child(6) :nth-child(7):before, [data-seconds$="2"] .digit:nth-child(6) :nth-child(7):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="3"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="3"] .digit:nth-child(2) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="3"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="3"] .digit:nth-child(2) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="3"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="3"] .digit:nth-child(3) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="3"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="3"] .digit:nth-child(3) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="3"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="3"] .digit:nth-child(4) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="3"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="3"] .digit:nth-child(4) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="3"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="3"] .digit:nth-child(5) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="3"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="3"] .digit:nth-child(5) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="3"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="3"] .digit:nth-child(6) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="3"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="3"] .digit:nth-child(6) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="4"] .digit:nth-child(2) :nth-child(2):before, [data-hours$="4"] .digit:nth-child(2) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="4"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="4"] .digit:nth-child(2) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="4"] .digit:nth-child(2) :nth-child(6):before, [data-hours$="4"] .digit:nth-child(2) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="4"] .digit:nth-child(3) :nth-child(2):before, [data-minutes^="4"] .digit:nth-child(3) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="4"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="4"] .digit:nth-child(3) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="4"] .digit:nth-child(3) :nth-child(6):before, [data-minutes^="4"] .digit:nth-child(3) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="4"] .digit:nth-child(4) :nth-child(2):before, [data-minutes$="4"] .digit:nth-child(4) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="4"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="4"] .digit:nth-child(4) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="4"] .digit:nth-child(4) :nth-child(6):before, [data-minutes$="4"] .digit:nth-child(4) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="4"] .digit:nth-child(5) :nth-child(2):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="4"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="4"] .digit:nth-child(5) :nth-child(6):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="4"] .digit:nth-child(6) :nth-child(2):before, [data-seconds$="4"] .digit:nth-child(6) :nth-child(2):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="4"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="4"] .digit:nth-child(6) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="4"] .digit:nth-child(6) :nth-child(6):before, [data-seconds$="4"] .digit:nth-child(6) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="5"] .digit:nth-child(2) :nth-child(3):before, [data-hours$="5"] .digit:nth-child(2) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="5"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="5"] .digit:nth-child(2) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="5"] .digit:nth-child(3) :nth-child(3):before, [data-minutes^="5"] .digit:nth-child(3) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="5"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="5"] .digit:nth-child(3) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="5"] .digit:nth-child(4) :nth-child(3):before, [data-minutes$="5"] .digit:nth-child(4) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="5"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="5"] .digit:nth-child(4) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="5"] .digit:nth-child(5) :nth-child(3):before, [data-seconds^="5"] .digit:nth-child(5) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="5"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="5"] .digit:nth-child(5) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="5"] .digit:nth-child(6) :nth-child(3):before, [data-seconds$="5"] .digit:nth-child(6) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="5"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="5"] .digit:nth-child(6) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="6"] .digit:nth-child(2) :nth-child(3):before, [data-hours$="6"] .digit:nth-child(2) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="6"] .digit:nth-child(3) :nth-child(3):before, [data-minutes^="6"] .digit:nth-child(3) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="6"] .digit:nth-child(4) :nth-child(3):before, [data-minutes$="6"] .digit:nth-child(4) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="6"] .digit:nth-child(5) :nth-child(3):before, [data-seconds^="6"] .digit:nth-child(5) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="6"] .digit:nth-child(6) :nth-child(3):before, [data-seconds$="6"] .digit:nth-child(6) :nth-child(3):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="7"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="7"] .digit:nth-child(2) :nth-child(4):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="7"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="7"] .digit:nth-child(2) :nth-child(6):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="7"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="7"] .digit:nth-child(3) :nth-child(4):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="7"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="7"] .digit:nth-child(3) :nth-child(6):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="7"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="7"] .digit:nth-child(4) :nth-child(4):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="7"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="7"] .digit:nth-child(4) :nth-child(6):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="7"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="7"] .digit:nth-child(5) :nth-child(4):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="7"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="7"] .digit:nth-child(5) :nth-child(6):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="7"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(1):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="7"] .digit:nth-child(6) :nth-child(4):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(4):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="7"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="7"] .digit:nth-child(6) :nth-child(6):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(6):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-hours$="9"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="9"] .digit:nth-child(2) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes^="9"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="9"] .digit:nth-child(3) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-minutes$="9"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="9"] .digit:nth-child(4) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds^="9"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="9"] .digit:nth-child(5) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  [data-seconds$="9"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="9"] .digit:nth-child(6) :nth-child(5):after {
    opacity: 0.1;
    transform: translateZ(-2vmax); }
  
  .line {
    position: absolute;
    transform-style: preserve-3d;
    perspective: 1000px; }
    .line:before, .line:after {
      content: '';
      display: block;
      position: absolute;
      color: #0bfd47;
      background: white;
      transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1);
      border-radius: 1ch;
      box-shadow: 0 0 1.5rem #0bfd47, inset 0 0 0.125vmin #0bfd47; }
    .line:after {
      transition-timing-function: cubic-bezier(0.4, 0, 0.1, 1); }
    .line:nth-child(2n - 1) {
      height: 50%;
      width: 0.6vmin; }
      .line:nth-child(2n - 1):before, .line:nth-child(2n - 1):after {
        height: calc(50% - 0.25vmin);
        width: 100%; }
      .line:nth-child(2n - 1):before {
        top: 0.25vmin;
        transform-origin: center top; }
      .line:nth-child(2n - 1):after {
        bottom: 0.25vmin;
        transform-origin: center bottom; }
    .line:nth-child(2n) {
      width: 100%;
      height: 0.6vmin; }
      .line:nth-child(2n):before, .line:nth-child(2n):after {
        height: 100%;
        width: calc(50% - 0.25vmin); }
      .line:nth-child(2n):before {
        left: 0.25vmin;
        transform-origin: left center; }
      .line:nth-child(2n):after {
        right: 0.25vmin;
        transform-origin: right center; }
    .line:nth-child(1) {
      top: 0;
      left: 0; }
    .line:nth-child(2) {
      top: 0;
      left: 0; }
    .line:nth-child(3) {
      top: 0;
      right: 0; }
    .line:nth-child(4) {
      top: 50%;
      left: 0; }
    .line:nth-child(5) {
      top: 50%;
      left: 0; }
    .line:nth-child(6) {
      bottom: 0;
      left: 0; }
    .line:nth-child(7) {
      top: 50%;
      right: 0; }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #121212;
    transform-style: preserve-3d;
    perspective: 1000px; }
  
  body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0; }
  
  *, *:before, *:after {
    box-sizing: border-box;
    position: relative; }
  
  *:before, *:after {
    content: '';
    display: block; }