@font-face {
	font-family: Quicksand;
	src: url(font/Quicksand-Bold.ttf);
}
body {
	text-align: center;
	font-family: Quicksand;
	color: white;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}
hr {
	color: white
}
.avt {
	width: 270px;
}
.center {
	transform: translate(-50%, -50%);
	background-color: #0a0f0f99;
	text-align: center;
	position: absolute;
	border-radius: 36px;
	max-width: 300px;
	padding: 40px;
	left: 50%;
	top: 50%;
}
.wrapper {
	position: absolute;
	width: 99%;
	height: 90%;
	overflow: visible;
}
.box div {
	position: absolute;
	width: 60px;
	height: 60px; 
	background-color: transparent;
	border: 6px solid white;
}
.box div:nth-child(1) {
	top: 12%;
	left: 42%;
	animation: animate 10s linear infinite;
}
.box div:nth-child(2) {
	top: 70%;
	left: 50%;
	animation: animate 7s linear infinite;
}
.box div:nth-child(3) {
	top: 17%;
	left: 6%;
	animation: animate 9s linear infinite;
}
.box div:nth-child(4) {
	top: 20%;
	left: 60%;
	animation: animate 10s linear infinite;
}
.box div:nth-child(5) {
	top: 67%;
	left: 10%;
	animation: animate 6s linear infinite;
}
.box div:nth-child(6) {
	top: 80%;
	left: 70%;
	animation: animate 12s linear infinite;
}
.box div:nth-child(7) {
	top: 60%;
	left: 80%;
	animation: animate 15s linear infinite;
}
.box div:nth-child(8) {
	top: 32%; 
	left: 25%;
	animation: animate 16s linear infinite;
}
.box div:nth-child(9) {
	top: 90%;
	left: 25%;
	animation: animate 9s linear infinite;
}
.box div:nth-child(10) {
	top: 20%;
	left: 80%;
	animation: animate 5s linear infinite;
}
@keyframes animate {
	0% {
		transform: scale(0) translateY(0) rotate(0);
		opacity: 1;
	}
	100% {
		transform: scale(1.3) translateY(-90px) rotate(360deg);
		opacity: 0;
	}
}
.box div {
	background-color: transparent;
	border: 5px solid white;
}
.icon {
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-webkit-transition: all 0.2s ease-in;
	transition: all 0.1s ease-in;
	width: 40px;
	vertical-align: middle;
	padding-left: 0.5em; 
	padding-right: 0.5em; 
	padding-top: 0.5em; 
	padding-bottom: 0.5em; 
}
.icon:hover {
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-webkit-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	transform: scale(1.25);
}
.glow {
	text-align: center;
	animation: glow 1s ease-in-out infinite alternate;
	color: white;
}
@-webkit-keyframes glow {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
	}

	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
	}
}