:root {
    --seg-thickness: 12vh;
    --led-on: #26ff0a;
    --led-off: #000000;
    --bg: #000;
}

/* LED container */
.led-container {
    display: inline-flex;
    gap: 8vh;
    margin-top: 5vh;
}

/* Digit */
.digit {
    position: relative;
    width: 40vh;
    height: 80vh;
}

/* Segment base */
.segment {
    position: absolute;
    background: var(--led-off);
    opacity: 0.15;
}

/* ON */
.segment.on {
    opacity: 1;
    background: var(--led-on);
}

/* Horizontal */
.segment.a,
.segment.d,
.segment.g {
    width: 94%;
    margin-left: 10px;
    height: var(--seg-thickness);
    left: 0;
    clip-path: polygon(30% 0%, 70% 0%,
            100% 30%, 100% 70%,
            70% 100%, 30% 100%,
            0% 70%, 0% 30%);
}

.segment.a {
    top: 0;
}

.segment.d {
    bottom: 0;
}

.segment.g {
    top: 50%;
    transform: translateY(-50%);
}

/* Vertical */
.segment.b,
.segment.c,
.segment.e,
.segment.f {
    width: var(--seg-thickness);
    height: 50%;
    clip-path: polygon(20% 0%, 80% 0%,
            100% 20%, 100% 80%,
            80% 100%, 20% 100%,
            0% 80%, 0% 20%);
}

.segment.b {
    top: 8px;
    right: 0;
}

.segment.c {
    bottom: 8px;
    right: 0;
}

.segment.e {
    bottom: 8px;
    left: 0;
}

.segment.f {
    top: 8px;
    left: 0;
}