.display-panel{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            to bottom,
            #08140d,
            #0c1d14
        );

    border:2px solid #3d5146;

    border-radius:8px;

    box-shadow:
        inset 0 0 35px rgba(90,255,120,.08),
        inset 0 0 6px rgba(0,0,0,.8),
        0 0 20px rgba(0,0,0,.35);

    padding:18px 22px;
}

.display-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        repeating-linear-gradient(

            transparent 0px,

            transparent 3px,

            rgba(255,255,255,.025) 4px

        );

    pointer-events:none;
}

.display-header{
    color:#7db88b;
    font-size:.8rem;
    letter-spacing:.25em;
    margin-bottom:14px;
    opacity:.9;
}

.display-value {
    font-size:2rem;
    font-weight:300;
    line-height:1.05;
    letter-spacing:.08em;
    color:#b8ff9b;
    text-shadow:
        0 0 6px rgba(120,255,150,.45),
        0 0 16px rgba(120,255,150,.2);

    letter-spacing:.08em;
    display: grid;
    grid-template-columns: max-content max-content 1fr max-content;
    row-gap: 0.25em;
    column-gap: 0.6em;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
    animation: glow 5s ease-in-out infinite;
}

.label {
    color:#238cff;
    opacity: .45;
}

.eq {
    /*justify-self: center;*/
    color:#238cff;
    opacity: .45;
}

.value {
    justify-self: end;
    padding-right: 30px;
    /*color: #d9ff9d;*/
    text-shadow:
        0 0 8px rgba(180,255,120,.6);
}

@keyframes glow {
    0%,100%{
        filter:brightness(1);
    }
    50%{
        filter:brightness(1.03);
    }
}