body{
	display: flex; 
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 700px;
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
}

html, body {
	margin: 0;
	padding: 0;
}

html{
	background: #000000;
	background-size:100%; 
	width:100%; 
	height:100%;

}  

#wrapper{
	position: relative;
	width: 100%;
	height: 100%;
}

.content{
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto auto;
	justify-items: center;
	align-items: center;
	color: #FFFFFF;
	font-size: 26px;
	font-weight: bold;
	position: relative;
	z-index: 100;
}

.background{
    color: #999999;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
}

.sky-container{
	position: absolute;
	top: 0;
	left: 0;
	z-index:-100;
	width: 100%;
	height: 100%;
	transform: rotateZ(45deg);
}

.star{
	position: absolute;
	top: 50%;
	left: -200%;
	height: 4px;
	width: 100px;
	background: linear-gradient(-45deg, #5f91ff, rgba(0,0,255,0));
	border-radius: 999px;
	filter: drop-shadow(0 0 6px #699bff);
	animation: tail 10s ease-in-out,
		shooting 10s ease-in-out;
}

@keyframes tail{
	0%{
		width: 0px;
	}
	30%{
		width: 500px;
	}
	100%{
		width: 0px;
	}
}

@keyframes shooting{
	0%{
		translateX(0);
	}
	100%{
		transform: translateX(3100px);
	}
}

@keyframes shining{
	0%{
		width: 0px;
	}
	50%{
		width: 20%;
	}
	100%{
		width: 0px;
	}
}

.star::before, .star::after{
	content: '';
	position: absolute;
	top: calc(50%-2px);
	right: 0;
	height: 4px;
	width: 30px;
	background: linear-gradient(-45deg, rgba(0, 0, 255,0),#5f91ff,rgba(0,0,255,0));
	border-radius: 100%;
	transform: translateX(50%) rotateZ(45deg);
}

.star::after{
	transform: translateX(50%) rotateZ(-45deg);
}

.star:nth-child(1){
	top: calc(50% - 70%);
	left: calc(10%);
	animation-delay: 1s;
}

.star:nth-child(1)::before, .star:nth-child(1)::after{
	animation: 1s;
}

.star:nth-child(2){
	top: calc(50% - 35%);
	left: calc(-10%);
	animation-delay: 1s;
}

.star:nth-child(2)::before, .star:nth-child(2)::after{
	animation: 1s;
}

.star:nth-child(3){
	top: calc(50% - 0px);
	left: calc(-0%);
	animation-delay: 1s;
}

.star:nth-child(3)::before, .star:nth-child(3)::after{
	animation: 1s;
}

.star:nth-child(4){
	top: calc(50% + 35%);
	left: calc(-15%);
	animation-delay: 1s;
}

.star:nth-child(4)::before, .star:nth-child(4)::after{
	animation: 1s;
}

.star:nth-child(5){
	top: calc(50% + 70%);
	left: calc(-10%);
	animation-delay: 1s;
}

.star:nth-child(5)::before, .star:nth-child(5)::after{
	animation: 1s;
}

#navigation{
	width: 100%;
	height: 100px;
	display: flex;
	text-align: right;
	justify-content: right;
	background: #FFFFFF;
}

#navigation > a:hover{
	color: white;
}

#iconsBox{
	width: 100%;
	height: 100px;
	display: flex;
	text-align: right;
	justify-content: right;
	background: #FFFFFF;
}

#iconsBox > a{
	width: 80px;
	height: 80px;
	margin: 10px 10px 10px 10px;
}

#linkedin{
	width: 80px;
	height: 80px;
}

#github{
	width: 80px;
	height: 80px;
}

#projects > a{
	color: #FFFFFF;
}