@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body
{
	overflow: hidden;
}

section {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #0d172e;
}

section:before {
	content: "";
	position: absolute;
	width: 30vw;
	height: 30vw;
	border: 5vw solid #ff9100;
	border-radius: 50%;
	box-shadow: 0 0 0 1vw #0d172e, 0 0 0 1.3vw #fff;
}

h2 {
	position: absolute;
	font-size: 8vw;
	color: #fff;
	font-weight: 400;
	text-align: center;
	line-height: 2em;
	z-index: 5;
	transform: skewY(-7deg);
	text-shadow: 1px 1px 0 #ccc,
	2px 2px 0 #ccc,
	3px 3px 0 #ccc,
	4px 4px 0 #ccc,
	5px 5px 0 #ccc,
	10px 10px 0px rgba(0,0,0,.2);
	animation: floating 5s ease-in-out infinite;
}

h2 span {
	font-weight: 700;
	font-size: 3em;
	text-shadow: 1px 1px 0 #ccc,
	2px 2px 0 #ccc,
	3px 3px 0 #ccc,
	4px 4px 0 #ccc,
	5px 5px 0 #ccc,
	6px 6px 0 #ccc,
	7px 7px 0 #ccc,
	8px 8px 0 #ccc,
	9px 9px 0 #ccc,
	10px 10px 0 #ccc,
	20px 20px 0px rgba(0,0,0,.2);
}

@keyframes floating {
	0%, 100% {
		transform: skewY(-7deg) translateY(-20px);
	}

	50% {
		transform: skewY(-7deg) translateY(20px);
	}
}

section i {
	position: absolute;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 10px #fff,
	0 0 20px #fff,
	0 0 40px #fff,
	0 0 80px #fff;
	animation: stars linear infinite;
}

@keyframes stars {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}