*
{
	box-sizing:border-box;
}

body
{
	background-color:black;
}

.main
{
	background-color:gree;
	width:50%;
	height:530px;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:auto;
	position:relative;
}

.sun
{
	position:relative;
	border-radius:50%;
	margin:5%;
	bottom:50px;
}

.sn-img
{
	
	height:100px;
	
}

.mercury
{
	position:absolute;
	animation:mercury 6s linear infinite;
	background-color:whit;
	width:50px;
	height:50px;
	top:190px;
	border-radius:50%;
}

.m2
{
	width:40%;
}

.venus
{
	position:absolute;
	width:50px;
	height:50px;
	top:200px;
	border-radius:50%;
	animation:venus 6s linear infinite;
}

.v1
{
	width:40%;
}

.moon
{
	position:absolute;
	top:10%;
	left:10%;
	animation:moon 10s linear infinite;
}

.mon-img
{
	width:40%;
}


.earth
{
	position:absolute;
	width:50px;
	height:50px;
	top:200px;
	border-radius:50%;
	animation:earth 6s linear infinite;
}

.e1
{
	width:50%;
}

.mars
{
	position:absolute;
	width:50px;
	height:50px;
	top:200px;
	border-radius:50%;
	animation:mars 6s linear infinite;
}

.m1
{
	width:50%;
}



@keyframes mercury
{
	from
	{
		transform:rotate(0deg) translateX(120px) rotate(0deg);
	}
	
	to
	{
		transform:rotate(360deg) translateX(120px) rotate(360deg);
	}
}

@keyframes venus
{
	from
	{
		transform:rotate(0deg) translateX(200px) rotate(0deg);
	}
	
	to
	{
		transform:rotate(360deg) translateX(200px) rotate(360deg);
	}
}

@keyframes earth
{
	from
	{
		transform:rotate(0deg) translateX(270px) rotate(0deg);
	}
	
	to
	{
		transform:rotate(360deg) translateX(270px) rotate(360deg);
	}
}

@keyframes moon
{
	from
	{
		transform:rotate(0deg) translateX(30px) rotate(0deg);
	}
	
	to
	{
		transform:rotate(360deg) translateX(30px) rotate(360deg);
	}
}

@keyframes mars
{
	from
	{
		transform:rotate(0deg) translateX(350px) rotate(0deg);
	}
	
	to
	{
		transform:rotate(360deg) translateX(350px) rotate(360deg);
	}
}