body{
  display: flex;
  justify-content: center;  
  align-items: center;
  height: 100vh;
  background: #000;
}
* {
	margin: 0px;
	padding: 0px;
}
.content {
	background: #000;
	height: 100vh;
	overflow: hidden;
}
.content h1 {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: candara;
    text-transform: uppercase;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-size: 80px;
	text-align: center;
}
.box ul li {
	position: absolute;
	width: 35px;
	height: 35px;
	list-style: none;
	opacity: 0;
	background: radial-gradient(deepskyblue, transparent, transparent);
	bottom: 0;
	left: 10vw;
	animation: animate 15s linear infinite;
}
.box ul li:nth-child(2) {
	left: 36vw;
	animation-delay: 2s;
}
.box ul li:nth-child(3) {
	left: 22vw;
	animation-delay: 4s;
}
.box ul li:nth-child(4) {
	left: 56vw;
	animation-delay: 6s;
}
.box ul li:nth-child(5) {
	left: 76vw;
	animation-delay: 4s;
}
.box ul li:nth-child(6) {
	left: 80vw;
	animation-delay: 8s;
}
h2 {
	font-size: 200px;
	font-family: bebas neue;
	background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: animate2 5s ease-in-out infinite;
	text-align: center;
	line-height: 0.9;
}
h2 span{
  font-weight: 300;
  font-size: 163px;
  display: block;
}
@keyframes animate2{
  0%{
    background-position: 0 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0 50%;
  }
}
@keyframes animate {
	0% {
		transform: scale(0);
		opacity: 1;
		bottom: 0;
	}
	100% {
		transform: scale(10);
		opacity: 0;
		bottom: 100vh;
	}
}