/**
 * Author: Bazaar.com, F230207060, Ahmar Ali (bc200403330) and Tabassam Ali (bc200401271)
 * Site: Bazaar.com
 * URL: http://localhost/
 */
.glitch {
    color: #6c757d;
    position: relative;
    margin: 0 auto;
}

@keyframes noise-anim {
    0% {
        clip-path: inset(47% 0 21% 0);
    }

    5% {
        clip-path: inset(19% 0 1% 0);
    }

    10% {
        clip-path: inset(18% 0 80% 0);
    }

    15% {
        clip-path: inset(30% 0 36% 0);
    }

    20% {
        clip-path: inset(40% 0 21% 0);
    }

    25% {
        clip-path: inset(81% 0 9% 0);
    }

    30% {
        clip-path: inset(4% 0 76% 0);
    }

    35% {
        clip-path: inset(59% 0 21% 0);
    }

    40% {
        clip-path: inset(92% 0 6% 0);
    }

    45% {
        clip-path: inset(33% 0 57% 0);
    }

    50% {
        clip-path: inset(44% 0 7% 0);
    }

    55% {
        clip-path: inset(28% 0 26% 0);
    }

    60% {
        clip-path: inset(32% 0 52% 0);
    }

    65% {
        clip-path: inset(66% 0 26% 0);
    }

    70% {
        clip-path: inset(10% 0 66% 0);
    }

    75% {
        clip-path: inset(64% 0 29% 0);
    }

    80% {
        clip-path: inset(12% 0 51% 0);
    }

    85% {
        clip-path: inset(81% 0 10% 0);
    }

    90% {
        clip-path: inset(74% 0 15% 0);
    }

    95% {
        clip-path: inset(80% 0 2% 0);
    }

    100% {
        clip-path: inset(49% 0 21% 0);
    }
}

.glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 red;
    top: 0;
    color: #6c757d;
    background: white;
    overflow: hidden;
    animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
    0% {
        clip-path: inset(66% 0 2% 0);
    }

    5% {
        clip-path: inset(18% 0 33% 0);
    }

    10% {
        clip-path: inset(59% 0 39% 0);
    }

    15% {
        clip-path: inset(91% 0 8% 0);
    }

    20% {
        clip-path: inset(51% 0 11% 0);
    }

    25% {
        clip-path: inset(4% 0 37% 0);
    }

    30% {
        clip-path: inset(71% 0 5% 0);
    }

    35% {
        clip-path: inset(21% 0 31% 0);
    }

    40% {
        clip-path: inset(84% 0 11% 0);
    }

    45% {
        clip-path: inset(81% 0 1% 0);
    }

    50% {
        clip-path: inset(38% 0 51% 0);
    }

    55% {
        clip-path: inset(68% 0 5% 0);
    }

    60% {
        clip-path: inset(90% 0 2% 0);
    }

    65% {
        clip-path: inset(9% 0 36% 0);
    }

    70% {
        clip-path: inset(60% 0 1% 0);
    }

    75% {
        clip-path: inset(21% 0 11% 0);
    }

    80% {
        clip-path: inset(92% 0 8% 0);
    }

    85% {
        clip-path: inset(100% 0 1% 0);
    }

    90% {
        clip-path: inset(93% 0 8% 0);
    }

    95% {
        clip-path: inset(98% 0 3% 0);
    }

    100% {
        clip-path: inset(10% 0 63% 0);
    }
}

.glitch::before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 blue;
    top: 0;
    color: #6c757d;
    background: white;
    overflow: hidden;
    animation: noise-anim-2 15s infinite linear alternate-reverse;
}