.glitchbox {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    height: 70vh;
    width: 100%;
    display: block;
}

P {
    padding: 0;
    margin: 0;
}

#app {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    color: #000000;
}

#wrapper {
    text-align: left;
    transform: rotate(-5deg);
}

.sub {
    color: #000000;
    font-size: 7em;
    font-weight: 900;
    line-height: 0.9em;
    letter-spacing: 0.1em;
    font-family: "Lato", sans-serif;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #000;
}

.glitch,
.glitch2 {
    color: #b40053;
    text-transform: uppercase;
    position: relative;
    display: block;
    font-size: 7em;
    line-height: 0.9em;
    font-weight: bolder;
    letter-spacing: 0.1em;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #b40053;
}


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

.glitch::before,
.glitch2:before {
    left: 5px;
    text-shadow: -10px 0 #ffffff;
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 60s infinite linear alternate-reverse;
}

.glitch::after,
.glitch2:after {
    left: -5px;
    text-shadow: 10px 0 #ffffff;
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 3s infinite linear alternate-reverse;
}

@-webkit-keyframes glitch-anim {
    0% {
        clip: rect(64px, 9999px, 89px, 0);
    }
    8.333333333333332% {
        clip: rect(85px, 9999px, 78px, 0);
    }
    16.666666666666664% {
        clip: rect(109px, 9999px, 52px, 0);
    }
    25% {
        clip: rect(29px, 9999px, 48px, 0);
    }
    33.33333333333333% {
        clip: rect(124px, 9999px, 3px, 0);
    }
    41.66666666666667% {
        clip: rect(57px, 9999px, 64px, 0);
    }
    50% {
        clip: rect(9px, 9999px, 88px, 0);
    }
    58.333333333333336% {
        clip: rect(32px, 9999px, 12px, 0);
    }
    66.66666666666666% {
        clip: rect(23px, 9999px, 149px, 0);
    }
    75% {
        clip: rect(112px, 9999px, 88px, 0);
    }
    83.33333333333334% {
        clip: rect(118px, 9999px, 31px, 0);
    }
    91.66666666666666% {
        clip: rect(72px, 9999px, 88px, 0);
    }
    100% {
        clip: rect(143px, 9999px, 134px, 0);
    }
}

@keyframes glitch-anim {
    0% {
        clip: rect(64px, 9999px, 89px, 0);
    }
    8.333333333333332% {
        clip: rect(85px, 9999px, 78px, 0);
    }
    16.666666666666664% {
        clip: rect(109px, 9999px, 52px, 0);
    }
    25% {
        clip: rect(29px, 9999px, 48px, 0);
    }
    33.33333333333333% {
        clip: rect(124px, 9999px, 3px, 0);
    }
    41.66666666666667% {
        clip: rect(57px, 9999px, 64px, 0);
    }
    50% {
        clip: rect(9px, 9999px, 88px, 0);
    }
    58.333333333333336% {
        clip: rect(32px, 9999px, 12px, 0);
    }
    66.66666666666666% {
        clip: rect(23px, 9999px, 149px, 0);
    }
    75% {
        clip: rect(112px, 9999px, 88px, 0);
    }
    83.33333333333334% {
        clip: rect(118px, 9999px, 31px, 0);
    }
    91.66666666666666% {
        clip: rect(72px, 9999px, 88px, 0);
    }
    100% {
        clip: rect(143px, 9999px, 134px, 0);
    }
}

@-webkit-keyframes glitch-anim-2 {
    6.666666666666667% {
        clip: rect(109px, 9999px, 107px, 0);
    }
    10% {
        clip: rect(73px, 9999px, 38px, 0);
    }
    13.333333333333334% {
        clip: rect(5px, 9999px, 40px, 0);
    }
    16.666666666666664% {
        clip: rect(3px, 9999px, 109px, 0);
    }
    20% {
        clip: rect(71px, 9999px, 94px, 0);
    }
    23.333333333333332% {
        clip: rect(42px, 9999px, 106px, 0);
    }
    26.666666666666668% {
        clip: rect(21px, 9999px, 97px, 0);
    }
    30% {
        clip: rect(20px, 9999px, 59px, 0);
    }
    33.33333333333333% {
        clip: rect(105px, 9999px, 112px, 0);
    }
    36.666666666666664% {
        clip: rect(30px, 9999px, 40px, 0);
    }
    40% {
        clip: rect(39px, 9999px, 78px, 0);
    }
    43.333333333333336% {
        clip: rect(58px, 9999px, 120px, 0);
    }
    46.666666666666664% {
        clip: rect(2px, 9999px, 84px, 0);
    }
    50% {
        clip: rect(123px, 9999px, 104px, 0);
    }
    53.333333333333336% {
        clip: rect(56px, 9999px, 43px, 0);
    }
    56.666666666666664% {
        clip: rect(74px, 9999px, 110px, 0);
    }
    60% {
        clip: rect(96px, 9999px, 97px, 0);
    }
    63.33333333333333% {
        clip: rect(118px, 9999px, 39px, 0);
    }
    66.66666666666666% {
        clip: rect(145px, 9999px, 75px, 0);
    }
    70% {
        clip: rect(138px, 9999px, 22px, 0);
    }
    73.33333333333333% {
        clip: rect(76px, 9999px, 30px, 0);
    }
    76.66666666666667% {
        clip: rect(95px, 9999px, 98px, 0);
    }
    80% {
        clip: rect(19px, 9999px, 104px, 0);
    }
    83.33333333333334% {
        clip: rect(50px, 9999px, 119px, 0);
    }
    86.66666666666667% {
        clip: rect(2px, 9999px, 131px, 0);
    }
    90% {
        clip: rect(6px, 9999px, 14px, 0);
    }
    93.33333333333333% {
        clip: rect(121px, 9999px, 75px, 0);
    }
    96.66666666666667% {
        clip: rect(48px, 9999px, 67px, 0);
    }
    100% {
        clip: rect(138px, 9999px, 46px, 0);
    }
}

@keyframes glitch-anim-2 {
    6.666666666666667% {
        clip: rect(109px, 9999px, 107px, 0);
    }
    10% {
        clip: rect(73px, 9999px, 38px, 0);
    }
    13.333333333333334% {
        clip: rect(5px, 9999px, 40px, 0);
    }
    16.666666666666664% {
        clip: rect(3px, 9999px, 109px, 0);
    }
    20% {
        clip: rect(71px, 9999px, 94px, 0);
    }
    23.333333333333332% {
        clip: rect(42px, 9999px, 106px, 0);
    }
    26.666666666666668% {
        clip: rect(21px, 9999px, 97px, 0);
    }
    30% {
        clip: rect(20px, 9999px, 59px, 0);
    }
    33.33333333333333% {
        clip: rect(105px, 9999px, 112px, 0);
    }
    36.666666666666664% {
        clip: rect(30px, 9999px, 40px, 0);
    }
    40% {
        clip: rect(39px, 9999px, 78px, 0);
    }
    43.333333333333336% {
        clip: rect(58px, 9999px, 120px, 0);
    }
    46.666666666666664% {
        clip: rect(2px, 9999px, 84px, 0);
    }
    50% {
        clip: rect(123px, 9999px, 104px, 0);
    }
    53.333333333333336% {
        clip: rect(56px, 9999px, 43px, 0);
    }
    56.666666666666664% {
        clip: rect(74px, 9999px, 110px, 0);
    }
    60% {
        clip: rect(96px, 9999px, 97px, 0);
    }
    63.33333333333333% {
        clip: rect(118px, 9999px, 39px, 0);
    }
    66.66666666666666% {
        clip: rect(145px, 9999px, 75px, 0);
    }
    70% {
        clip: rect(138px, 9999px, 22px, 0);
    }
    73.33333333333333% {
        clip: rect(76px, 9999px, 30px, 0);
    }
    76.66666666666667% {
        clip: rect(95px, 9999px, 98px, 0);
    }
    80% {
        clip: rect(19px, 9999px, 104px, 0);
    }
    83.33333333333334% {
        clip: rect(50px, 9999px, 119px, 0);
    }
    86.66666666666667% {
        clip: rect(2px, 9999px, 131px, 0);
    }
    90% {
        clip: rect(6px, 9999px, 14px, 0);
    }
    93.33333333333333% {
        clip: rect(121px, 9999px, 75px, 0);
    }
    96.66666666666667% {
        clip: rect(48px, 9999px, 67px, 0);
    }
    100% {
        clip: rect(138px, 9999px, 46px, 0);
    }
}

/* end glitch */

/* other effect */
.slide {
    display: block;
    position: relative;
    left: 30%;
    top: -50%;
    height: 100px;
    width: 120px;
    background: #b40053;
    filter: blur(10px);
}

.one {
    left: 50%;
    top: 0%;
    height: 100px;
    width: 150px;
    filter: blur(10px);
}

.two {
    height: 20px;
    width: 25px;
    left: 80%;
    top: 20%;
    opacity: 0.6859;
    filter: blur(3px);
}

.three {
    height: 180px;
    width: 200px;
    left: 20%;
    top: 30%;
    opacity: 0.5;
    filter: blur(10px);
}

.four {
    height: 20px;
    width: 20px;
    left: 30%;
    top: -35%;
    filter: blur(3px);
}

.five {
    height: 10px;
    width: 10px;
    left: 35%;
    top: -40%;
    opacity: 0.6859;
    filter: blur(3px);
}

.six {
    height: 15px;
    width: 15px;
    left: 76%;
    top: -10%;
    opacity: 1;
    filter: blur(1px);
}
.seven {
    height: 12px;
    width: 10px;
    left: 60%;
    top: 30%;
    opacity: 0.9;
    filter: blur(5px);
}

.eight {
    left: 45%;
    top: 30%;
    height: 14px;
    width: 14px;
    filter: blur(1px);
}

.nine {
    left: 65%;
    top: -27%;
    height: 80px;
    width: 80px;
    background: #b40053;
    filter: blur(4px);
}

.ten {
    height: 20px;
    width: 20px;
    left: 60%;
    top: -17%;
}



.one2 {
    left: 10%;
    top: 0;
    height: 80px;
    width: 100px;
    filter: blur(10px);
}

.two2 {
    height: 10px;
    width: 15px;
    left: 90%;
    top: -50%;
    opacity: 0.6859;
    filter: blur(3px);
}

.three2 {
    height: 120px;
    width: 150px;
    left: 10%;
    top: -80%;
    opacity: 0.5;
    filter: blur(10px);
}

.four2 {
    height: 30px;
    width: 30px;
    left: 5%;
    top: -75%;
    filter: blur(3px);
}

.five2 {
    height: 20px;
    width: 20px;
    left: 70%;
    top: -10%;
    opacity: 0.6859;
    filter: blur(3px);
}

.six2 {
    height: 25px;
    width: 25px;
    left: 77%;
    top: -80%;
    opacity: 1;
    filter: blur(1px);
}
.seven2 {
    height: 60px;
    width: 50px;
    left: 40%;
    top: -10%;
    opacity: 0.9;
    filter: blur(5px);
}

.eight2 {
    left: 35%;
    top: -75%;
    height: 14px;
    width: 14px;
    filter: blur(1px);
}

.nine2 {
    left: 10%;
    top: -60%;
    height: 80px;
    width: 80px;
    background: #a70052;
    filter: blur(4px);
}

.ten2 {
    height: 20px;
    width: 20px;
    left: 90%;
    top: -40%;
}

.gray {
    background: #8c8c8c;
}


@media screen and (max-width: 800px) {
    .sub,
    .glitch,
    .glitch2 {
        font-size: 3em;
        -webkit-text-stroke-width: 3px;
    }
    .slide  {
        width: 50px;
        height: 40px;
    }
    .one {
        height: 80px;
        width: 70px;
    }
    .three {
        height: 100px;
        width: 90px;
    }

}