body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: "Microsoft Yahei", Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}
 
.animate {
	font-size: 50px;
	font-weight:bolder;
	color: red;
}

.animate span {
	display: inline-block;
}

.animate span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate span:nth-of-type(3) {
	animation-delay: .1s;
}
.animate span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate span:nth-of-type(7) {
	animation-delay: .3s;
}
.animate span:nth-of-type(8) {
	animation-delay: .35s;
}
.animate span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate span:nth-of-type(12) {
	animation-delay: .55s;
}
.animate span:nth-of-type(13) {
	animation-delay: .6s;
}
.animate span:nth-of-type(14) {
	animation-delay: .65s;
}
.animate span:nth-of-type(15) {
	animation-delay: .7s;
}
.animate span:nth-of-type(16) {
	animation-delay: .75s;
}
.animate span:nth-of-type(17) {
	animation-delay: .8s;
}
.animate span:nth-of-type(18) {
	animation-delay: .85s;
}
.animate span:nth-of-type(19) {
	animation-delay: .9s;
}
.animate span:nth-of-type(20) {
	animation-delay: .95s;
}
.animate span:nth-of-type(21) {
	animation-delay: 1s;
}
.animate span:nth-of-type(22) {
	animation-delay: 1.05s;
}
.animate span:nth-of-type(23) {
	animation-delay: 1.15s;
}
.animate span:nth-of-type(24) {
	animation-delay: 1.2s;
}
.animate span:nth-of-type(25) {
	animation-delay: 1.25s;
}
.animate span:nth-of-type(26) {
	animation-delay: 1.3s;
}

/* Animation One */

.one span { 
	opacity: 0;
	transform: translate(-150px, -50px) rotate(-180deg) scale(3);
	animation: revolveScale 4s forwards infinite;
}

@keyframes revolveScale {
	6% {
		transform: translate(20px, 20px) rotate(30deg) scale(.3);
	}
	
	12%,100% {
		transform: translate(0) rotate(0) scale(1);
		opacity: 1;
	}
}

/* Animation Two */

.two span { 
	opacity: 0;
	transform: translate(200px, -100px) scale(2);
	animation: ballDrop 3.5s forwards infinite;
}

@keyframes ballDrop {
	6% {
		transform: translate(0, 20px) rotate(-180deg) scale(.5);
	}
	
	10%,100% {
		transform: translate(0) rotate(0deg) scale(1);
		opacity: 1;
	}
}

/* Animation Three */

.three span { 
	opacity: 0;
	transform: translate(-300px, 0) scale(0);
	animation: sideSlide 5s forwards infinite;
}

@keyframes sideSlide {
	9% {
		transform: translate(20px, 0) scale(1);
		color: #b10e81;
	}

	12% {
		transform: translate(20px, 0) scale(1);
		color: #b10e81;
	}

	14% {
		transform: translate(0) scale(1.2);
		color: #00f0ff;
	}
	
	15%,100% {
		transform: translate(0) scale(1);
		opacity: 1;
		color: red;
	}
}

/* Animation Four */

.four span { 
	opacity: 0;
	transform: translate(0, -100px) rotate(360deg) scale(0);
	animation: revolveDrop 3.5s forwards infinite;
}

@keyframes revolveDrop {
	4% {
		transform: translate(0, -50px) rotate(180deg) scale(1);
	}

	5% {
		transform: translate(0, 20px) scale(.8) rotate(0deg);
	}

	10%,100% {
		transform: translate(0) scale(1) rotate(0deg);
		opacity: 1;
	}
}

/* Animation Five */

.five span { 
	opacity: 0;
	transform: translate(0, -100px) rotate(360deg) scale(0);
	animation: dropVanish 5s forwards infinite;
}

@keyframes dropVanish {
	5% {
		transform: translate(0, -50px) rotate(180deg) scale(1);
	}

	15% {
		transform: translate(0, 20px) scale(.8) rotate(0deg);
		opacity: 1;
	}

	12% {
		transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
		opacity: 0;
	}

	15%,100% {
		transform: translate(0) scale(1) rotate(0deg);
		opacity: 1;
	}
} 

/* Animation Six */

.six span { 
	opacity: 0;
	transform: rotate(-180deg) translate(150px, 0); 
	animation: twister 5s forwards infinite;
}

@keyframes twister { 
	10% { 
		opacity: 1;
	}
	15%,100%{
		transform: rotate(0deg) translate(0);
		opacity: 1;
	}
} 

/* Animation Seven */

.seven span { 
	opacity: 0;
	transform: translate(-150px, 0) scale(.3);
	animation: leftRight 5s forwards infinite; 
}

@keyframes leftRight {
	6% {
		transform: translate(50px, 0) scale(.7);
		opacity: 1;
		color: #348c04;
	}

	9% {
		color: #0f40ba;
	}

	12% {
		color: #ffd700;
		transform: translate(0) scale(3);
		opacity: 0;
	} 
	15%,100% {
		transform: translate(0) scale(1);
		opacity: 1;
	} 
}

/* .info-show{     */
    /* color: red;    */
	/* @supports (-webkit-background-clip: text) or (background-clip: text) { */
		/* background: -webkit-linear-gradient( */
					/* 135deg, */
                    /* #0eaf6d, */
                    /* #ff6ac6 25%, */
                    /* #147b96 50%, */
                    /* #e6d205 65%, */
                    /* #2cc4e0 70%, */
                    /* #8b2ce0 80%, */
                    /* #ff6384 95%, */
                    /* #08dfb4);  */
		/* -webkit-text-fill-color: transparent;  */
		/* -webkit-background-clip: text;  */
		/* -webkit-background-size: 200% 100%;  */
		/* -webkit-animation: flowCss 6s infinite linear; */
	/* }  */
/* } */

/* @-webkit-keyframes flowCss{     */
	/* 0%{ */
		/* background-position: 0 0; */
	/* } */
	/* 100%{ */
		/* background-position: -400% 0; */
	/* } */
/* }  */

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1;  
}

.lil-gui {
	z-index: 2 !important;  
}

@media all and ( max-width: 640px ) {
	.lil-gui.root { 
		right: auto;
		top: auto;
		max-height: 50%;
		max-width: 80%;
		bottom: 0;
		left: 0;
	}
}