500 error glitch

gistfile1.txt

<div class="legacy_content">
<div class="glitch" data-text="500">500</div>
</div>

...


div {
    display: block;
}
.glitch {
    position: relative;
    font-size: 50px;
    line-height: 50px;
    font-weight: bold;
}
.legacy-content {
    position: absolute;
    width: 400px;
    height: auto;
    top: 50%;
    left: 50%;
    font-family: Lucida Sans, sans-serif;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
}

.glitch::before {
    left: 2px;
    text-shadow: -1px 0 red;
    background: #fff;
    -webkit-animation: glitch-anim-2 2s infinite linear alternate-reverse;
    -moz-animation: glitch-anim-2 2s infinite linear alternate-reverse;
    -ms-animation: glitch-anim-2 2s infinite linear alternate-reverse;
    -o-animation: glitch-anim-2 2s infinite linear alternate-reverse;
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::after {
    clip: rect(20px, 400px, 30px, 0);
    left: -2px;
    text-shadow: -1px 0 blue;
    background: #fff;
    -webkit-animation: glitch-anim 2s infinite linear alternate-reverse;
    -moz-animation: glitch-anim 2s infinite linear alternate-reverse;
    -ms-animation: glitch-anim 2s infinite linear alternate-reverse;
    -o-animation: glitch-anim 2s infinite linear alternate-reverse;
    animation: glitch-anim 2s infinite linear alternate-reverse;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}