@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:100");
.scrolling-text-container {
	position: relative;
	width: 100%;
	height: 50px; /* Ensure the container has enough height */
	overflow: hidden;
}

.scrolling-text {
	position: absolute;
	white-space: nowrap;
	-webkit-animation: scroll-left 20s linear infinite;
	        animation: scroll-left 20s linear infinite;
}

@-webkit-keyframes scroll-left {
	from {
		left: 100%;
		width: 100%;
	}
	to {
		left: -100%;
		width: 100%;
	}
}

@keyframes scroll-left {
	from {
		left: 100%;
		width: 100%;
	}
	to {
		left: -100%;
		width: 100%;
	}
}
.glitch {
	color: white;
	font-size: auto;
	position: relative;
	width: auto;
	margin: 0 auto;
}

@-webkit-keyframes noise-anim {
	0% {
		clip: rect(74px, 9999px, 34px, 0);
	}
	5% {
		clip: rect(48px, 9999px, 91px, 0);
	}
	10% {
		clip: rect(70px, 9999px, 75px, 0);
	}
	15% {
		clip: rect(74px, 9999px, 24px, 0);
	}
	20% {
		clip: rect(71px, 9999px, 36px, 0);
	}
	25% {
		clip: rect(98px, 9999px, 71px, 0);
	}
	30% {
		clip: rect(13px, 9999px, 98px, 0);
	}
	35% {
		clip: rect(60px, 9999px, 63px, 0);
	}
	40% {
		clip: rect(73px, 9999px, 23px, 0);
	}
	45% {
		clip: rect(34px, 9999px, 85px, 0);
	}
	50% {
		clip: rect(1px, 9999px, 35px, 0);
	}
	55% {
		clip: rect(59px, 9999px, 12px, 0);
	}
	60% {
		clip: rect(29px, 9999px, 20px, 0);
	}
	65% {
		clip: rect(75px, 9999px, 5px, 0);
	}
	70% {
		clip: rect(63px, 9999px, 79px, 0);
	}
	75% {
		clip: rect(33px, 9999px, 38px, 0);
	}
	80% {
		clip: rect(87px, 9999px, 71px, 0);
	}
	85% {
		clip: rect(25px, 9999px, 59px, 0);
	}
	90% {
		clip: rect(90px, 9999px, 37px, 0);
	}
	95% {
		clip: rect(21px, 9999px, 24px, 0);
	}
	100% {
		clip: rect(84px, 9999px, 55px, 0);
	}
}

@keyframes noise-anim {
	0% {
		clip: rect(74px, 9999px, 34px, 0);
	}
	5% {
		clip: rect(48px, 9999px, 91px, 0);
	}
	10% {
		clip: rect(70px, 9999px, 75px, 0);
	}
	15% {
		clip: rect(74px, 9999px, 24px, 0);
	}
	20% {
		clip: rect(71px, 9999px, 36px, 0);
	}
	25% {
		clip: rect(98px, 9999px, 71px, 0);
	}
	30% {
		clip: rect(13px, 9999px, 98px, 0);
	}
	35% {
		clip: rect(60px, 9999px, 63px, 0);
	}
	40% {
		clip: rect(73px, 9999px, 23px, 0);
	}
	45% {
		clip: rect(34px, 9999px, 85px, 0);
	}
	50% {
		clip: rect(1px, 9999px, 35px, 0);
	}
	55% {
		clip: rect(59px, 9999px, 12px, 0);
	}
	60% {
		clip: rect(29px, 9999px, 20px, 0);
	}
	65% {
		clip: rect(75px, 9999px, 5px, 0);
	}
	70% {
		clip: rect(63px, 9999px, 79px, 0);
	}
	75% {
		clip: rect(33px, 9999px, 38px, 0);
	}
	80% {
		clip: rect(87px, 9999px, 71px, 0);
	}
	85% {
		clip: rect(25px, 9999px, 59px, 0);
	}
	90% {
		clip: rect(90px, 9999px, 37px, 0);
	}
	95% {
		clip: rect(21px, 9999px, 24px, 0);
	}
	100% {
		clip: rect(84px, 9999px, 55px, 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);
	animation: noise-anim 2s infinite linear alternate-reverse;
}

@-webkit-keyframes noise-anim-2 {
	0% {
		clip: rect(46px, 9999px, 51px, 0);
	}
	5% {
		clip: rect(46px, 9999px, 45px, 0);
	}
	10% {
		clip: rect(8px, 9999px, 90px, 0);
	}
	15% {
		clip: rect(99px, 9999px, 24px, 0);
	}
	20% {
		clip: rect(50px, 9999px, 4px, 0);
	}
	25% {
		clip: rect(28px, 9999px, 65px, 0);
	}
	30% {
		clip: rect(36px, 9999px, 29px, 0);
	}
	35% {
		clip: rect(27px, 9999px, 80px, 0);
	}
	40% {
		clip: rect(71px, 9999px, 30px, 0);
	}
	45% {
		clip: rect(48px, 9999px, 29px, 0);
	}
	50% {
		clip: rect(26px, 9999px, 63px, 0);
	}
	55% {
		clip: rect(74px, 9999px, 13px, 0);
	}
	60% {
		clip: rect(81px, 9999px, 68px, 0);
	}
	65% {
		clip: rect(10px, 9999px, 99px, 0);
	}
	70% {
		clip: rect(60px, 9999px, 87px, 0);
	}
	75% {
		clip: rect(2px, 9999px, 98px, 0);
	}
	80% {
		clip: rect(19px, 9999px, 58px, 0);
	}
	85% {
		clip: rect(38px, 9999px, 82px, 0);
	}
	90% {
		clip: rect(28px, 9999px, 13px, 0);
	}
	95% {
		clip: rect(37px, 9999px, 100px, 0);
	}
	100% {
		clip: rect(43px, 9999px, 64px, 0);
	}
}

@keyframes noise-anim-2 {
	0% {
		clip: rect(46px, 9999px, 51px, 0);
	}
	5% {
		clip: rect(46px, 9999px, 45px, 0);
	}
	10% {
		clip: rect(8px, 9999px, 90px, 0);
	}
	15% {
		clip: rect(99px, 9999px, 24px, 0);
	}
	20% {
		clip: rect(50px, 9999px, 4px, 0);
	}
	25% {
		clip: rect(28px, 9999px, 65px, 0);
	}
	30% {
		clip: rect(36px, 9999px, 29px, 0);
	}
	35% {
		clip: rect(27px, 9999px, 80px, 0);
	}
	40% {
		clip: rect(71px, 9999px, 30px, 0);
	}
	45% {
		clip: rect(48px, 9999px, 29px, 0);
	}
	50% {
		clip: rect(26px, 9999px, 63px, 0);
	}
	55% {
		clip: rect(74px, 9999px, 13px, 0);
	}
	60% {
		clip: rect(81px, 9999px, 68px, 0);
	}
	65% {
		clip: rect(10px, 9999px, 99px, 0);
	}
	70% {
		clip: rect(60px, 9999px, 87px, 0);
	}
	75% {
		clip: rect(2px, 9999px, 98px, 0);
	}
	80% {
		clip: rect(19px, 9999px, 58px, 0);
	}
	85% {
		clip: rect(38px, 9999px, 82px, 0);
	}
	90% {
		clip: rect(28px, 9999px, 13px, 0);
	}
	95% {
		clip: rect(37px, 9999px, 100px, 0);
	}
	100% {
		clip: rect(43px, 9999px, 64px, 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);
	animation: noise-anim-2 3s infinite linear alternate-reverse;
}

.sparkContainer {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 75px;
	background: #111;
	overflow: hidden;
}
.sparkContainer .btn {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	line-height: 60px;
	margin: auto;
	text-align: center;
}
.sparkContainer .btn a {
	position: relative;
	display: block;
	font-size: 25px;
	color: #fff;
	font-family: "Quattrocento Sans", sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.sparkContainer .btn a::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	margin: auto;
	background: #fff;
}
.sparkContainer .btn a:hover::after {
	width: 100%;
	-webkit-transition: all 1.2s linear;
	transition: all 1.2s linear;
}
.sparkContainer .btn a span {
	display: inline-block;
	margin: 0 10px;
	-webkit-transition: all 0.5s 0s ease;
	transition: all 0.5s 0s ease;
	visibility: visible;
	opacity: 1;
}
.sparkContainer .btn a:hover span:nth-child(1) {
	-webkit-transition: all 1s 0.1s ease;
	transition: all 1s 0.1s ease;
	-webkit-transform: perspective(2000px) translateY(50px) translateX(24px) translateZ(70px) rotateX(897deg) rotateY(556deg);
	        transform: perspective(2000px) translateY(50px) translateX(24px) translateZ(70px) rotateX(897deg) rotateY(556deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(2) {
	-webkit-transition: all 1s 0.2s ease;
	transition: all 1s 0.2s ease;
	-webkit-transform: perspective(2000px) translateY(-66px) translateX(-30px) translateZ(-21px) rotateX(547deg) rotateY(468deg);
	        transform: perspective(2000px) translateY(-66px) translateX(-30px) translateZ(-21px) rotateX(547deg) rotateY(468deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(3) {
	-webkit-transition: all 1s 0.3s ease;
	transition: all 1s 0.3s ease;
	-webkit-transform: perspective(2000px) translateY(-45px) translateX(-21px) translateZ(26px) rotateX(536deg) rotateY(844deg);
	        transform: perspective(2000px) translateY(-45px) translateX(-21px) translateZ(26px) rotateX(536deg) rotateY(844deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(4) {
	-webkit-transition: all 1s 0.4s ease;
	transition: all 1s 0.4s ease;
	-webkit-transform: perspective(2000px) translateY(3px) translateX(82px) translateZ(-76px) rotateX(875deg) rotateY(1060deg);
	        transform: perspective(2000px) translateY(3px) translateX(82px) translateZ(-76px) rotateX(875deg) rotateY(1060deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(5) {
	-webkit-transition: all 1s 0.5s ease;
	transition: all 1s 0.5s ease;
	-webkit-transform: perspective(2000px) translateY(-86px) translateX(-70px) translateZ(8px) rotateX(955deg) rotateY(621deg);
	        transform: perspective(2000px) translateY(-86px) translateX(-70px) translateZ(8px) rotateX(955deg) rotateY(621deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(6) {
	-webkit-transition: all 1s 0.6s ease;
	transition: all 1s 0.6s ease;
	-webkit-transform: perspective(2000px) translateY(77px) translateX(78px) translateZ(28px) rotateX(793deg) rotateY(859deg);
	        transform: perspective(2000px) translateY(77px) translateX(78px) translateZ(28px) rotateX(793deg) rotateY(859deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(7) {
	-webkit-transition: all 1s 0.7s ease;
	transition: all 1s 0.7s ease;
	-webkit-transform: perspective(2000px) translateY(-58px) translateX(76px) translateZ(15px) rotateX(464deg) rotateY(922deg);
	        transform: perspective(2000px) translateY(-58px) translateX(76px) translateZ(15px) rotateX(464deg) rotateY(922deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(8) {
	-webkit-transition: all 1s 0.8s ease;
	transition: all 1s 0.8s ease;
	-webkit-transform: perspective(2000px) translateY(79px) translateX(-87px) translateZ(64px) rotateX(580deg) rotateY(373deg);
	        transform: perspective(2000px) translateY(79px) translateX(-87px) translateZ(64px) rotateX(580deg) rotateY(373deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(9) {
	-webkit-transition: all 1s 0.9s ease;
	transition: all 1s 0.9s ease;
	-webkit-transform: perspective(2000px) translateY(83px) translateX(14px) translateZ(67px) rotateX(838deg) rotateY(846deg);
	        transform: perspective(2000px) translateY(83px) translateX(14px) translateZ(67px) rotateX(838deg) rotateY(846deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(10) {
	-webkit-transition: all 1s 1s ease;
	transition: all 1s 1s ease;
	-webkit-transform: perspective(2000px) translateY(82px) translateX(-73px) translateZ(51px) rotateX(468deg) rotateY(997deg);
	        transform: perspective(2000px) translateY(82px) translateX(-73px) translateZ(51px) rotateX(468deg) rotateY(997deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(11) {
	-webkit-transition: all 1s 1.1s ease;
	transition: all 1s 1.1s ease;
	-webkit-transform: perspective(2000px) translateY(86px) translateX(18px) translateZ(-47px) rotateX(974deg) rotateY(617deg);
	        transform: perspective(2000px) translateY(86px) translateX(18px) translateZ(-47px) rotateX(974deg) rotateY(617deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(12) {
	-webkit-transition: all 1s 1.2s ease;
	transition: all 1s 1.2s ease;
	-webkit-transform: perspective(2000px) translateY(39px) translateX(-92px) translateZ(88px) rotateX(1075deg) rotateY(1002deg);
	        transform: perspective(2000px) translateY(39px) translateX(-92px) translateZ(88px) rotateX(1075deg) rotateY(1002deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(13) {
	-webkit-transition: all 1s 1.3s ease;
	transition: all 1s 1.3s ease;
	-webkit-transform: perspective(2000px) translateY(64px) translateX(-18px) translateZ(68px) rotateX(1059deg) rotateY(718deg);
	        transform: perspective(2000px) translateY(64px) translateX(-18px) translateZ(68px) rotateX(1059deg) rotateY(718deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(14) {
	-webkit-transition: all 1s 1.4s ease;
	transition: all 1s 1.4s ease;
	-webkit-transform: perspective(2000px) translateY(82px) translateX(55px) translateZ(-24px) rotateX(733deg) rotateY(757deg);
	        transform: perspective(2000px) translateY(82px) translateX(55px) translateZ(-24px) rotateX(733deg) rotateY(757deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(15) {
	-webkit-transition: all 1s 1.5s ease;
	transition: all 1s 1.5s ease;
	-webkit-transform: perspective(2000px) translateY(2px) translateX(74px) translateZ(27px) rotateX(907deg) rotateY(474deg);
	        transform: perspective(2000px) translateY(2px) translateX(74px) translateZ(27px) rotateX(907deg) rotateY(474deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(16) {
	-webkit-transition: all 1s 1.6s ease;
	transition: all 1s 1.6s ease;
	-webkit-transform: perspective(2000px) translateY(99px) translateX(33px) translateZ(-84px) rotateX(852deg) rotateY(653deg);
	        transform: perspective(2000px) translateY(99px) translateX(33px) translateZ(-84px) rotateX(852deg) rotateY(653deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(17) {
	-webkit-transition: all 1s 1.7s ease;
	transition: all 1s 1.7s ease;
	-webkit-transform: perspective(2000px) translateY(-64px) translateX(67px) translateZ(43px) rotateX(841deg) rotateY(581deg);
	        transform: perspective(2000px) translateY(-64px) translateX(67px) translateZ(43px) rotateX(841deg) rotateY(581deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(18) {
	-webkit-transition: all 1s 1.8s ease;
	transition: all 1s 1.8s ease;
	-webkit-transform: perspective(2000px) translateY(21px) translateX(-69px) translateZ(5px) rotateX(931deg) rotateY(571deg);
	        transform: perspective(2000px) translateY(21px) translateX(-69px) translateZ(5px) rotateX(931deg) rotateY(571deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(19) {
	-webkit-transition: all 1s 1.9s ease;
	transition: all 1s 1.9s ease;
	-webkit-transform: perspective(2000px) translateY(14px) translateX(-47px) translateZ(-69px) rotateX(866deg) rotateY(1027deg);
	        transform: perspective(2000px) translateY(14px) translateX(-47px) translateZ(-69px) rotateX(866deg) rotateY(1027deg);
	visibility: hidden;
	opacity: 0;
}
.sparkContainer .btn a:hover span:nth-child(20) {
	-webkit-transition: all 1s 2s ease;
	transition: all 1s 2s ease;
	-webkit-transform: perspective(2000px) translateY(-27px) translateX(-8px) translateZ(84px) rotateX(422deg) rotateY(676deg);
	        transform: perspective(2000px) translateY(-27px) translateX(-8px) translateZ(84px) rotateX(422deg) rotateY(676deg);
	visibility: hidden;
	opacity: 0;
}

html, body {
	background: #212121;
	height: 100%;
}

.scrambleContainer {
	height: 100%;
	width: 100%;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.scrambleText {
	font-weight: 100;
	font-size: 40px;
	color: #FAFAFA;
}

.dud {
	color: #757575;
}

/* button styling */
.uiVerseButton {
	margin: 0;
	height: auto;
	background: transparent;
	padding: 0;
	border: none;
	cursor: pointer;
	--border-right: 6px;
	--text-stroke-color: rgba(255,255,255,0.6);
	--animation-color: #37FF8B;
	--fs-size: 2em;
	letter-spacing: 3px;
	text-decoration: none;
	font-size: var(--fs-size);
	font-family: "Arial";
	position: relative;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px var(--text-stroke-color);
}

/* this is the text, when you hover on button */
.hover-text {
	position: absolute;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	content: attr(data-text);
	color: var(--animation-color);
	width: 0%;
	inset: 0;
	border-right: var(--border-right) solid var(--animation-color);
	overflow: hidden;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	-webkit-text-stroke: 1px var(--animation-color);
}

/* hover */
.uiVerseButton:hover .hover-text {
	width: 100%;
	-webkit-filter: drop-shadow(0 0 23px var(--animation-color));
	        filter: drop-shadow(0 0 23px var(--animation-color));
}
/*# sourceMappingURL=effects.css.map */