/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Fullscreen Scene */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* Stack content vertically */
height: 100vh; /* Use viewport height */
background-color: #000;
overflow: hidden;
}
/* Solar System container */
.solar-system {
position: relative;
width: 300px; /* Reduced size */
height: 300px; /* Reduced size */
}
/* Sun */
.sun {
position: absolute;
width: 60px; /* Reduced size */
height: 60px; /* Reduced size */
background: radial-gradient(circle, #ffd700, #ff8c00);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 30px rgba(255, 223, 0, 0.6);
}
/* Orbit paths */
.orbit {
position: absolute;
border: 1px dashed rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
/* Planet Styles */
.planet {
position: absolute;
border-radius: 50%;
transform-origin: center;
}
/* Mercury */
.mercury-orbit {
width: 100px; /* Reduced size */
height: 100px; /* Reduced size */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mercury {
width: 8px; /* Reduced size */
height: 8px; /* Reduced size */
background: radial-gradient(circle, #ccc, #888);
top: 0;
left: 50%;
transform: translate(-50%, -4px);
}
/* Venus */
.venus-orbit {
width: 140px; /* Reduced size */
height: 140px; /* Reduced size */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.venus {
width: 12px; /* Reduced size */
height: 12px; /* Reduced size */
background: radial-gradient(circle, #e6c16f, #b08030);
top: 0;
left: 50%;
transform: translate(-50%, -6px);
}
/* Earth */
.earth-orbit {
width: 180px; /* Reduced size */
height: 180px; /* Reduced size */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.earth {
width: 14px; /* Reduced size */
height: 14px; /* Reduced size */
background: radial-gradient(circle, #4fa3ff, #1a64d1);
top: 0;
left: 50%;
transform: translate(-50%, -7px);
}
/* Mars */
.mars-orbit {
width: 220px; /* Reduced size */
height: 220px; /* Reduced size */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mars {
width: 12px; /* Reduced size */
height: 12px; /* Reduced size */
background: radial-gradient(circle, #ff6347, #d04a33);
top: 0;
left: 50%;
transform: translate(-50%, -6px);
}
/* Jupiter */
.jupiter-orbit {
width: 300px; /* Reduced size */
height: 300px; /* Reduced size */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jupiter {
width: 20px; /* Reduced size */
height: 20px; /* Reduced size */
background: radial-gradient(circle, #d39e00, #b57300);
top: 0;
left: 50%;
transform: translate(-50%, -10px);
}
/* Saturn */
.saturn-orbit {
width: 360px; /* Reduced size */
height: 360px; /* Reduced size */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.saturn {
width: 22px; /* Reduced size */
height: 22px; /* Reduced size */
background: radial-gradient(circle, #e5c16c, #b0904f);
top: 0;
left: 50%;
transform: translate(-50%, -11px);
}
/* Saturn's rings */
.saturn::before {
content: '';
position: absolute;
width: 45px; /* Reduced size */
height: 8px; /* Reduced size */
background: linear-gradient(to right, transparent, #b0904f, #e5c16c, #b0904f, transparent);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Uranus */
.uranus-orbit {
width: 420px; /* Reduced size */
height: 420px; /* Reduced size */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.uranus {
width: 16px; /* Reduced size */
height: 16px; /* Reduced size */
background: radial-gradient(circle, #82e6ff, #3dbcd9);
top: 0;
left: 50%;
transform: translate(-50%, -8px);
}
/* Neptune */
.neptune-orbit {
width: 490px; /* Reduced size */
height: 490px; /* Reduced size */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.neptune {
width: 14px; /* Reduced size */
height: 14px; /* Reduced size */
background: radial-gradient(circle, #335bff, #1a3aab);
top: 0;
left: 50%;
transform: translate(-50%, -7px);
}
Prince
