*{
    margin:0;
    padding:0px;
    
}

body{
    background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvIvirhdcJOHYSx8LTIKLKK3YC_lNlu6aDpw&s");
	background-size:100% 100%;
	background-position:center
}
.navigation{
	display:flex;
	justify-content:space-between;
	
	color:#fff;
	padding:10px 30px;
}
.nav-left{
	display:flex;
	gap:40px;
	font-size:18px;
	margin-top:8px;
}
.container{
	display:flex;
	justify-content:space-between;
}

.info{
	padding:20px;
	color:#fff;
	width:250px;
	margin:40px 20px;
	 background: linear-gradient(
    145deg,
    rgba(139,92,246,0.15),
    rgba(59,130,246,0.08)
  );
  border: 1px solid rgba(255,255,255,0.12);
}
.info-earth{
	padding:20px;
	color:#fff;
	width:300px;
	margin:40px 20px;
	 background: linear-gradient(
    145deg,
    rgba(139,92,246,0.15),
    rgba(59,130,246,0.08)
  );
  border: 1px solid rgba(255,255,255,0.12);
}
.solar-pan{
	display:flex;
	margin:20px 10px;
}
.solar-pan i{
	width:40px;
	height:40px;
}
#earth{
	width:100px;
	height:100px;
	margin-left:4rem;
}
.solar-system{
    position:relative;
    width:700px;
    height:700px;
	
}

.sun{
	position:absolute;
	top:45%;
	left:49%;
	width:120px;
	height:120px;
	transform:translate(-50%, -50%);
}
.orbit{
	position:absolute;
	top:45%;
	left:49%;
	border-radius:50%;
	border:1px dashed rgba(255,255,255,0.3);
	transform:translate(-50%, -50%);
}
.earth-orbit{
	width:300px;
	height:300px;
	animation:rotate 12s linear infinite;
}
.earth img{
	position:absolute;
	width:50px;
	height:50px;
	top:55%;
	right:-25px;
	transform:translatey(-50%)
	
}
.moon-orbit{
	position:absolute;
	width:90px;
	height:90px;
	top:55%;
	left:99%;
	border:1px dashed rgba(255,255,255,0.3);
	border-radius:50%;
	transform:translate(-50%, -50%);
	animation:rotate 12s linear infinite;
}

.moon img{
	position:absolute;
	width:30px;
	height:30px;
	top:45%;
	right:-15px;
	transform:translatey(-50%)
}
.mars-orbit{
	width:180px;
	height:180px;
	animation:rotate 12s linear infinite;
}
.mars img{
	position:absolute;
	width:30px;
	height:30px;
	top:90%;
	left:18px;
	transform:translatey(-50%)
}

.venus-orbit{
	width:420px;
	height:420px;
	animation:rotate 15s linear infinite;
}
.venus img{
	position:absolute;
	width:50px;
	height:50px;
	top:35%;
	right:-15px;
	transform:translatey(-50%)
}
@keyframes rotate{
	from{
		transform:translate(-50%, -50%)rotate(0deg);
	}
	to{
		transform:translate(-50%, -50%)rotate(360deg);
	}
}