html,body {
	width:100%;
	height:100%;
	display:flex;
	background:#000;
	overflow:hidden;
}
.g-number {
	position:absolute;
	width:300px;
	top:27%;
	text-align:center;
	font-size:32px;
	z-index:10;
	color:#fff;
}
.g-container {
	position:relative;
	width:300px;
	height:400px;
	margin:auto;
}
.g-contrast {
	filter:contrast(15) hue-rotate(0);
	width:300px;
	height:400px;
	background-color:#000;
	overflow:hidden;
	animation:hueRotate 10s infinite linear;
}
.g-circle {
	position:relative;
	width:300px;
	height:300px;
	box-sizing:border-box;
	filter:blur(8px);
}
.g-circle::after {
	content:"";
	position:absolute;
	top:40%;
	left:50%;
	transform:translate(-50%,-50%) rotate(0);
	width:200px;
	height:200px;
	background-color:#00ff6f;
	border-radius:42% 38% 62% 49%/45%;
	animation:rotate 10s infinite linear;
}
.g-circle::before {
	content:"";
	position:absolute;
	width:176px;
	height:176px;
	top:40%;
	left:50%;
	transform:translate(-50%,-50%);
	border-radius:50%;
	background-color:#000;
	z-index:10;
}
.g-bubbles {
	position:absolute;
	left:50%;
	bottom:0;
	width:100px;
	height:40px;
	transform:translate(-50%,0);
	border-radius:100px 100px 0 0;
	background-color:#00ff6f;
	filter:blur(5px);
}
li {
	position:absolute;
	border-radius:50%;
	background:#00ff6f;
}
li:nth-child(0) {
	left:44px;
	top:50%;
	transform:translate(-50%,-50%);
	width:28px;
	height:28px;
	animation:moveToTop 6s ease-in-out -4.605s infinite;
}
li:nth-child(1) {
	left:81px;
	top:50%;
	transform:translate(-50%,-50%);
	width:24px;
	height:24px;
	animation:moveToTop 7s ease-in-out -3.177s infinite;
}
li:nth-child(2) {
	left:57px;
	top:50%;
	transform:translate(-50%,-50%);
	width:17px;
	height:17px;
	animation:moveToTop 5s ease-in-out -0.734s infinite;
}
li:nth-child(3) {
	left:85px;
	top:50%;
	transform:translate(-50%,-50%);
	width:16px;
	height:16px;
	animation:moveToTop 7s ease-in-out -0.508s infinite;
}
li:nth-child(4) {
	left:79px;
	top:50%;
	transform:translate(-50%,-50%);
	width:28px;
	height:28px;
	animation:moveToTop 7s ease-in-out -2.352s infinite;
}
li:nth-child(5) {
	left:70px;
	top:50%;
	transform:translate(-50%,-50%);
	width:21px;
	height:21px;
	animation:moveToTop 6s ease-in-out -1.219s infinite;
}
li:nth-child(6) {
	left:58px;
	top:50%;
	transform:translate(-50%,-50%);
	width:25px;
	height:25px;
	animation:moveToTop 6s ease-in-out -1.061s infinite;
}
li:nth-child(7) {
	left:38px;
	top:50%;
	transform:translate(-50%,-50%);
	width:28px;
	height:28px;
	animation:moveToTop 6s ease-in-out -1.943s infinite;
}
li:nth-child(8) {
	left:50px;
	top:50%;
	transform:translate(-50%,-50%);
	width:23px;
	height:23px;
	animation:moveToTop 7s ease-in-out -2.766s infinite;
}
li:nth-child(9) {
	left:30px;
	top:50%;
	transform:translate(-50%,-50%);
	width:18px;
	height:18px;
	animation:moveToTop 9s ease-in-out -1.567s infinite;
}
li:nth-child(10) {
	left:82px;
	top:50%;
	transform:translate(-50%,-50%);
	width:29px;
	height:29px;
	animation:moveToTop 6s ease-in-out -0.412s infinite;
}
li:nth-child(11) {
	left:41px;
	top:50%;
	transform:translate(-50%,-50%);
	width:28px;
	height:28px;
	animation:moveToTop 8s ease-in-out -4.538s infinite;
}
li:nth-child(12) {
	left:54px;
	top:50%;
	transform:translate(-50%,-50%);
	width:22px;
	height:22px;
	animation:moveToTop 7s ease-in-out -0.882s infinite;
}
li:nth-child(13) {
	left:43px;
	top:50%;
	transform:translate(-50%,-50%);
	width:25px;
	height:25px;
	animation:moveToTop 4s ease-in-out -3.176s infinite;
}
li:nth-child(14) {
	left:24px;
	top:50%;
	transform:translate(-50%,-50%);
	width:17px;
	height:17px;
	animation:moveToTop 7s ease-in-out -0.26s infinite;
}
li:nth-child(15) {
	left:43px;
	top:50%;
	transform:translate(-50%,-50%);
	width:30px;
	height:30px;
	animation:moveToTop 6s ease-in-out -3.362s infinite;
}
@keyframes rotate {
	50% {
	border-radius:45%/42% 38% 58% 49%;
}
100% {
	transform:translate(-50%,-50%) rotate(720deg);
}
}@keyframes moveToTop {
	90% {
	opacity:1;
}
100% {
	opacity:0.1;
	transform:translate(-50%,-180px);
}
}@keyframes hueRotate {
	100% {
	filter:contrast(15) hue-rotate(360deg);
}
}