body {
    background: black;
    font-family: 'Varela', sans-serif;
    text-align: center;
}

body .head {
    padding: 1.5em 0;
}

body .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .head {
    padding: 0;
}

div.head {
    font-size: 5em;
}

div.text {
    font-size: 2em;
}

.glitch {
    color: white;
    position: relative;
    white-space: nowrap;
    display: inline-block;
    font-size: 90px;
}

@-webkit-keyframes noise-anim {
    0% {
        clip: rect(42px, 9999px, 15px, 0);
    }
    5% {
        clip: rect(59px, 9999px, 61px, 0);
    }
    10% {
        clip: rect(98px, 9999px, 11px, 0);
    }
    15.0% {
        clip: rect(95px, 9999px, 91px, 0);
    }
    20% {
        clip: rect(33px, 9999px, 99px, 0);
    }
    25% {
        clip: rect(36px, 9999px, 16px, 0);
    }
    30.0% {
        clip: rect(17px, 9999px, 82px, 0);
    }
    35% {
        clip: rect(9px, 9999px, 6px, 0);
    }
    40% {
        clip: rect(58px, 9999px, 74px, 0);
    }
    45% {
        clip: rect(98px, 9999px, 50px, 0);
    }
    50% {
        clip: rect(34px, 9999px, 92px, 0);
    }
    55.0% {
        clip: rect(23px, 9999px, 21px, 0);
    }
    60.0% {
        clip: rect(53px, 9999px, 87px, 0);
    }
    65% {
        clip: rect(33px, 9999px, 57px, 0);
    }
    70% {
        clip: rect(39px, 9999px, 86px, 0);
    }
    75% {
        clip: rect(98px, 9999px, 50px, 0);
    }
    80% {
        clip: rect(68px, 9999px, 1px, 0);
    }
    85.0% {
        clip: rect(11px, 9999px, 3px, 0);
    }
    90% {
        clip: rect(76px, 9999px, 47px, 0);
    }
    95% {
        clip: rect(9px, 9999px, 46px, 0);
    }
    100% {
        clip: rect(78px, 9999px, 54px, 0);
    }
}

@keyframes noise-anim {
    0% {
        clip: rect(42px, 9999px, 15px, 0);
    }
    5% {
        clip: rect(59px, 9999px, 61px, 0);
    }
    10% {
        clip: rect(98px, 9999px, 11px, 0);
    }
    15.0% {
        clip: rect(95px, 9999px, 91px, 0);
    }
    20% {
        clip: rect(33px, 9999px, 99px, 0);
    }
    25% {
        clip: rect(36px, 9999px, 16px, 0);
    }
    30.0% {
        clip: rect(17px, 9999px, 82px, 0);
    }
    35% {
        clip: rect(9px, 9999px, 6px, 0);
    }
    40% {
        clip: rect(58px, 9999px, 74px, 0);
    }
    45% {
        clip: rect(98px, 9999px, 50px, 0);
    }
    50% {
        clip: rect(34px, 9999px, 92px, 0);
    }
    55.0% {
        clip: rect(23px, 9999px, 21px, 0);
    }
    60.0% {
        clip: rect(53px, 9999px, 87px, 0);
    }
    65% {
        clip: rect(33px, 9999px, 57px, 0);
    }
    70% {
        clip: rect(39px, 9999px, 86px, 0);
    }
    75% {
        clip: rect(98px, 9999px, 50px, 0);
    }
    80% {
        clip: rect(68px, 9999px, 1px, 0);
    }
    85.0% {
        clip: rect(11px, 9999px, 3px, 0);
    }
    90% {
        clip: rect(76px, 9999px, 47px, 0);
    }
    95% {
        clip: rect(9px, 9999px, 46px, 0);
    }
    100% {
        clip: rect(78px, 9999px, 54px, 0);
    }
}

.glitch:after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 red;
    top: 0;
    color: white;
    background: black;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    -webkit-animation: noise-anim 10s infinite linear alternate-reverse;
    animation: noise-anim 10s infinite linear alternate-reverse;
}

@-webkit-keyframes noise-anim-2 {
    0% {
        clip: rect(58px, 9999px, 21px, 0);
    }
    5% {
        clip: rect(37px, 9999px, 86px, 0);
    }
    10% {
        clip: rect(65px, 9999px, 52px, 0);
    }
    15.0% {
        clip: rect(50px, 9999px, 14px, 0);
    }
    20% {
        clip: rect(83px, 9999px, 91px, 0);
    }
    25% {
        clip: rect(61px, 9999px, 41px, 0);
    }
    30.0% {
        clip: rect(14px, 9999px, 37px, 0);
    }
    35% {
        clip: rect(80px, 9999px, 86px, 0);
    }
    40% {
        clip: rect(66px, 9999px, 95px, 0);
    }
    45% {
        clip: rect(70px, 9999px, 79px, 0);
    }
    50% {
        clip: rect(56px, 9999px, 1px, 0);
    }
    55.0% {
        clip: rect(27px, 9999px, 19px, 0);
    }
    60.0% {
        clip: rect(98px, 9999px, 69px, 0);
    }
    65% {
        clip: rect(100px, 9999px, 49px, 0);
    }
    70% {
        clip: rect(22px, 9999px, 84px, 0);
    }
    75% {
        clip: rect(85px, 9999px, 9px, 0);
    }
    80% {
        clip: rect(34px, 9999px, 49px, 0);
    }
    85.0% {
        clip: rect(57px, 9999px, 91px, 0);
    }
    90% {
        clip: rect(22px, 9999px, 48px, 0);
    }
    95% {
        clip: rect(47px, 9999px, 45px, 0);
    }
    100% {
        clip: rect(39px, 9999px, 41px, 0);
    }
}

@keyframes noise-anim-2 {
    0% {
        clip: rect(58px, 9999px, 21px, 0);
    }
    5% {
        clip: rect(37px, 9999px, 86px, 0);
    }
    10% {
        clip: rect(65px, 9999px, 52px, 0);
    }
    15.0% {
        clip: rect(50px, 9999px, 14px, 0);
    }
    20% {
        clip: rect(83px, 9999px, 91px, 0);
    }
    25% {
        clip: rect(61px, 9999px, 41px, 0);
    }
    30.0% {
        clip: rect(14px, 9999px, 37px, 0);
    }
    35% {
        clip: rect(80px, 9999px, 86px, 0);
    }
    40% {
        clip: rect(66px, 9999px, 95px, 0);
    }
    45% {
        clip: rect(70px, 9999px, 79px, 0);
    }
    50% {
        clip: rect(56px, 9999px, 1px, 0);
    }
    55.0% {
        clip: rect(27px, 9999px, 19px, 0);
    }
    60.0% {
        clip: rect(98px, 9999px, 69px, 0);
    }
    65% {
        clip: rect(100px, 9999px, 49px, 0);
    }
    70% {
        clip: rect(22px, 9999px, 84px, 0);
    }
    75% {
        clip: rect(85px, 9999px, 9px, 0);
    }
    80% {
        clip: rect(34px, 9999px, 49px, 0);
    }
    85.0% {
        clip: rect(57px, 9999px, 91px, 0);
    }
    90% {
        clip: rect(22px, 9999px, 48px, 0);
    }
    95% {
        clip: rect(47px, 9999px, 45px, 0);
    }
    100% {
        clip: rect(39px, 9999px, 41px, 0);
    }
}

.glitch:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 blue;
    top: 0;
    color: white;
    background: black;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    -webkit-animation: noise-anim-2 16s infinite linear alternate-reverse;
    animation: noise-anim-2 16s infinite linear alternate-reverse;
}
