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;
}
@keyframes rotate {
	50% {
	border-radius:45% / 42% 38% 58% 49%;
}
100% {
	transform:translate(-50%,-50%) rotate(720deg);
}
}@keyframes moveToTop {
	90% {
	opacity:1;
}
100% {
	opacity:.1;
	transform:translate(-50%,-180px);
}
}@keyframes hueRotate {
	100% {
	filter:contrast(15) hue-rotate(360deg);
}
}