: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 #0BFDFD, inset 0 0 0.25vmax #0BFDFD;
font-size: 8vmax;
text-shadow: 0 0 1rem #0BFDFD;
-webkit-animation: pulse 1s alternate cubic-bezier(0.5, 0, 0.5, 1) infinite;
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%;
}

@-webkit-keyframes pulse {
to {
opacity: 0.5;
}
}

@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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
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.3;
transform: translateZ(-2vmax);
}

.line {
position: absolute;
transform-style: preserve-3d;
perspective: 1000px;
}
.line:before, .line:after {
content: "";
display: block;
position: absolute;
color: #0BFDFD;
background: white;
transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1);
border-radius: 1ch;
box-shadow: 0 0 1rem #0BFDFD, inset 0 0 0.125vmin #0BFDFD;
}
.line:after {
transition-timing-function: cubic-bezier(0.4, 0, 0.1, 1);
}
.line:nth-child(2n-1) {
height: 50%;
width: 0.5vmin;
}
.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.5vmin;
}
.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;
}