body {
	background: #020617;
	height: 100vh;
	display: grid;
	place-items: center;
}

.sun {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #fff, #94a3b8);
	box-shadow:
	0 0 25px rgba(255,255,255,0.8),
	0 0 60px rgba(148,163,184,0.4);

}

.orbit {
	position: absolute;
	inset: 0;
	margin: auto;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.25);
	animation: spin linear infinite;
}

.orbit span {
	position: absolute;
	top: -6px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: linear-gradient(135deg, #38bdf8, #a78bfa);
	box-shadow: 0 0 12px rgba(167, 139, 250, 0.9);
}

.o1 { width: 70px; height: 70px; animation-duration: 8s; }
.o2 { width: 100px; height: 100px; animation-duration: 12s; } 
.o3 { width: 130px; height: 130px; animation-duration: 20s; }

.o1 span {
	background: linear-gradient(135deg, #22c55e, #4ade80);
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);
}


.o2 span {
        background: linear-gradient(135deg, #38bdf8, #0ea5e9);
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
}


.o3 span {
        background: linear-gradient(135deg, #f472b6, #ec4899);
        box-shadow: 0 0 12px rgba(244, 114, 182, 0.9);
}


@keyframes spin {
	to { transform: rotate(360deg); }
}