body{
	background: #200122;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6f0000, #200122);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6f0000, #200122); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	height: 90vh;
	width: 100vw;
	overflow: hidden;
}
.main-text{
	position:relative;
	z-index: 99;
	font-size: 12em;
	color: #fff;
	left: 35%;
	top: 40%;
	font-family: 'Josefin Slab', serif;
}
.main-text::before,
.main-text::after {
	position: absolute;
  content: attr(data-text);
  top: 0;
  left: 0;
	animation: glitching-green .3s cubic-bezier(.95, .46, .55, .94) both infinite;
}
.main-text::before{
	color: #00c2ba;
	z-index: -2;
	animation: glitching-blue .6s cubic-bezier(.25, .46, .25, .94) both infinite;
}
.main-text::after{
	color: #33ff04;
	z-index: -1;
}
@keyframes glitching-blue {
    0% {
        transform: translate(0)
    }
    20% {
        transform: translate(1px, 0px)
    }
    40% {
        transform: translate(3px, 0px)
    }
    60% {
        transform: translate(-2px, 0px)
    }
		65% {
			transform: translate(5px, 0px)
		}
    80% {
        transform: translate(3px, 0px)
    }
    to {
        transform: translate(0)
    }
}

@keyframes glitching-green {
    0% {
        transform: translate(0)
    }
    20% {
        transform: translate(1px, 0px)
    }
    40% {
        transform: translate(-2px, 0px)
    }
    60% {
        transform: translate(2px, 0px)
    }
    80% {
        transform: translate(-3px, 0px)
    }
    to {
        transform: translate(0)
    }
}