.glitch-text {
    position: relative;
    color: var(--main-color);
    letter-spacing: 2px;
}

.glitch-effect-1::before,
.glitch-effect-2::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: 2px;
    text-shadow: -1px 0 red;
    clip: rect(24px, 550px, 90px, 0);
    opacity: 0.8;
}

.glitch-effect-1::after,
.glitch-effect-2::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: -2px;
    text-shadow: 1px 0 blue;
    clip: rect(85px, 550px, 140px, 0);
    opacity: 0.8;
}

.glitch-effect-2::before {
    text-shadow: -2px 0 green;
    clip: rect(40px, 550px, 80px, 0);
}

.glitch-effect-2::after {
    text-shadow: 2px 0 magenta;
    clip: rect(120px, 550px, 160px, 0);
}