body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: black;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper h1.glitch {
    color: white;
    font-family: sans-serif;
    font-weight: 800;
    position: relative;
    font-size: min(9vw, 150px);
    padding: 1.88vw;
    transition: padding 0.1s ease;
    will-change: clip-path;
}

.wrapper h1.glitch::before,
.wrapper h1.glitch::after {
    color: white;
    content: '//UNDONE';
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    overflow: hidden;
    top: 0;
    padding: 1.88vw;
    transition: padding 0.1s ease;
}

.wrapper h1.glitch::before {
    left: 3px;
    text-shadow: -2px 0 red;
    animation-name: glitch-animation-1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.wrapper h1.glitch::after {
    left: -3px;
    text-shadow: -2px 0 blue;
    animation-name: glitch-animation-2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

@keyframes glitch-animation-1 {
    0% {
        clip-path: inset(6.88vw 0vw calc(100% - 0.38vw) 0.5vw);
    }
    5% {
        clip-path: inset(0.88vw 0vw calc(100% - 7.76vw) 0.5vw);
    }
    10% {
        clip-path: inset(15.12vw 0vw calc(100% - 10.5vw) 0.5vw);
    }
    15% {
        clip-path: inset(2vw 0vw calc(100% - 1.5vw) 0.5vw);
    }
    20% {
        clip-path: inset(18.26vw 0vw calc(100% - 9.5vw) 0.5vw);
    }
    25% {
        clip-path: inset(3.76vw 0vw calc(100% - 1.62vw) 0.5vw);
    }
    30% {
        clip-path: inset(7vw 0vw calc(100% - 12.38vw) 0.5vw);
    }
    35% {
        clip-path: inset(1.38vw 0vw calc(100% - 11.5vw) 0.5vw);
    }
    40% {
        clip-path: inset(9vw 0vw calc(100% - 2.26vw) 0.5vw);
    }
    45% {
        clip-path: inset(0.62vw 0vw calc(100% - 16.26vw) 0.5vw);
    }
    50% {
        clip-path: inset(18.76vw 0vw calc(100% - 9.88vw) 0.5vw);
    }
    55% {
        clip-path: inset(17.62vw 0vw calc(100% - 2.88vw) 0.5vw);
    }
    60% {
        clip-path: inset(2.38vw 0vw calc(100% - 5.62vw) 0.5vw);
    }
    65% {
        clip-path: inset(11.88vw 0vw calc(100% - 2vw) 0.5vw);
    }
    70% {
        clip-path: inset(15vw 0vw calc(100% - 14.26vw) 0.5vw);
    }
    75% {
        clip-path: inset(11.88vw 0vw calc(100% - 0.12vw) 0.5vw);
    }
    80% {
        clip-path: inset(1.38vw 0vw calc(100% - 0.26vw) 0.5vw);
    }
    85% {
        clip-path: inset(14.5vw 0vw calc(100% - 2.62vw) 0.5vw);
    }
    90% {
        clip-path: inset(10.88vw 0vw calc(100% - 7.62vw) 0.5vw);
    }
    95% {
        clip-path: inset(13.62vw 0vw calc(100% - 5.62vw) 0.5vw);
    }
    100% {
        clip-path: inset(0.12vw 0vw calc(100% - 8.62vw) 0.5vw);
    }
}

@keyframes glitch-animation-2 {
    0% {
        clip-path: inset(6.76vw 0vw calc(100% - 1vw) 0.5vw);
    }
    5% {
        clip-path: inset(4.12vw 0vw calc(100% - 4.5vw) 0.5vw);
    }
    10% {
        clip-path: inset(7.76vw 0vw calc(100% - 8vw) 0.5vw);
    }
    15% {
        clip-path: inset(8.5vw 0vw calc(100% - 5vw) 0.5vw);
    }
    20% {
        clip-path: inset(4.38vw 0vw calc(100% - 1.76vw) 0.5vw);
    }
    25% {
        clip-path: inset(5.26vw 0vw calc(100% - 16.62vw) 0.5vw);
    }
    30% {
        clip-path: inset(8.62vw 0vw calc(100% - 3.38vw) 0.5vw);
    }
    35% {
        clip-path: inset(16.12vw 0vw calc(100% - 6vw) 0.5vw);
    }
    40% {
        clip-path: inset(14.12vw 0vw calc(100% - 16.5vw) 0.5vw);
    }
    45% {
        clip-path: inset(16.38vw 0vw calc(100% - 16.88vw) 0.5vw);
    }
    50% {
        clip-path: inset(8.38vw 0vw calc(100% - 11.38vw) 0.5vw);
    }
    55% {
        clip-path: inset(9.12vw 0vw calc(100% - 15.88vw) 0.5vw);
    }
    60% {
        clip-path: inset(3.76vw 0vw calc(100% - 4.38vw) 0.5vw);
    }
    65% {
        clip-path: inset(9.76vw 0vw calc(100% - 12.76vw) 0.5vw);
    }
    70% {
        clip-path: inset(16.12vw 0vw calc(100% - 14vw) 0.5vw);
    }
    75% {
        clip-path: inset(4.12vw 0vw calc(100% - 9.12vw) 0.5vw);
    }
    80% {
        clip-path: inset(6.38vw 0vw calc(100% - 14.26vw) 0.5vw);
    }
    85% {
        clip-path: inset(13.38vw 0vw calc(100% - 3.26vw) 0.5vw);
    }
    90% {
        clip-path: inset(2.5vw 0vw calc(100% - 5.76vw) 0.5vw);
    }
    95% {
        clip-path: inset(13.5vw 0vw calc(100% - 5.38vw) 0.5vw);
    }
    100% {
        clip-path: inset(3.88vw 0vw calc(100% - 13.5vw) 0.5vw);
    }
}