html {

    height: 100vh;
    width: 100vw;

}

body {

    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #232323;
    overflow: hidden;

}

#MainContainer {

    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 30% auto 30%;
    justify-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;

}

#GlitchContainer {

    display: grid;
    grid-row: 2 / 2;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    justify-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

}

#GlitchContainer > h1 {

    grid-column: 1 / 1;
    grid-row: 1 / 1;
    font-family: 'Source Code Pro', monospace;
    font-size: 3em;
    text-align: center;

}

#GlitchText {

    color: #fff;

}

#Glitch1 {

    color: aqua;
    -webkit-animation: Glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    animation: Glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    z-index: -1;

}

#Glitch2 {

    color: fuchsia;
    -webkit-animation: Glitch 0.3s cubic-bezier(.25, .46, .45, .94) both reverse infinite;
    animation: Glitch 0.3s linear cubic-bezier(.25, .46, .45, .94) both reverse infinite;
    z-index: -2;

}


@-webkit-keyframes Glitch {
    
    0% {

		-webkit-transform: translate(0);
        transform: translate(0);
    
    }
    
    20% {
    
        -webkit-transform: translate(-4px, 4px);
        transform: translate(-4px, 4px);

    }

    40% {

        -webkit-transform: translate(-4px, -4px);
        transform: translate(-4px, -4px);

    }

    60% {

        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px);

    }

    80% {

        -webkit-transform: translate(4px, -4px);
        transform: translate(4px, -4px);

    }

    100% {

		-webkit-transform: translate(0);
        transform: translate(0);

    }
    
}

@keyframes Glitch {

    0% {

		-webkit-transform: translate(0);
        transform: translate(0);
    
    }
    
    20% {
    
        -webkit-transform: translate(-4px, 4px);
        transform: translate(-4px, 4px);

    }

    40% {

        -webkit-transform: translate(-4px, -4px);
        transform: translate(-4px, -4px);

    }

    60% {

        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px);

    }

    80% {

        -webkit-transform: translate(4px, -4px);
        transform: translate(4px, -4px);

    }

    100% {

		-webkit-transform: translate(0);
        transform: translate(0);

    }

}