@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');
@import url(https://fonts.googleapis.com/css?family=Khula:700);
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

#anim{
    animation: glitch 1s linear infinite;
}

@keyframes glitch{
    2%,64%{
        transform: translate(2px,0) skew(0deg);
    }
    4%,60%{
        transform: translate(-2px,0) skew(0deg);
    }
    62%{
        transform: translate(0,0) skew(5deg);
    }
}

#anim:before,
#anim:after{
    content: attr(title);
    position: absolute;
    left: 0;
}

#anim:before{
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
    2%,64%{
        transform: translate(2px,-2px);
    }
    4%,60%{
        transform: translate(-2px,2px);
    }
    62%{
        transform: translate(13px,-1px) skew(-13deg);
    }
}

#anim:after{
    animation: glitchBotom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
    2%,64%{
        transform: translate(-2px,0);
    }
    4%,60%{
        transform: translate(-2px,0);
    }
    62%{
        transform: translate(-22px,5px) skew(21deg);
    }
}

.blink {
    animation: blinker 0.8s linear infinite;
}

.hidden {
    opacity:0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: black;
}

.console-container {

    font-family: Khula, serif;
    font-size:1.5rem;
    text-align:center;
    height:200px;
    display:block;
    position:absolute;
    color:white;
    left:0;
    right:0;
}

h1 {
    text-transform: Uppercase;
    margin-bottom: .5rem;
    font-family: 'Rubik', sans-serif;
    font-size: 6rem;
    color: #E4E5E6; }

h1 {
    position: relative;
    background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

h1:before,
h1:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0; }

h1:before {
    z-index: -1;
    text-shadow: -0.001em -0.001em 1px rgba(255,255,255,.15)}

h1:after {
    z-index: -2;
    text-shadow: 10px 10px 10px rgba(0,0,0,.5), 20px 20px 20px rgba(0,0,0,.4), 30px 30px 30px rgba(0,0,0,.1);
    mix-blend-mode: multiply; }

.reverse {
    transform: scale(-1, 1);
    color: #000080;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}