:root {
        --bg-color: #020205;
        --text-color: #ffffff;
        --accent-color: #00ffcc;
    }

    body {
        margin: 0;
        background-color: var(--bg-color);
        color: var(--text-color);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        overflow: hidden;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Starry Background with Twinkle */
    .stars-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: black;
    }

    .star {
        position: absolute;
        background: white;
        border-radius: 50%;
        opacity: 0.5;
        animation: twinkle var(--duration) infinite;
    }

    @keyframes twinkle {

        0%,
        100% {
            opacity: 0.3;
        }

        50% {
            opacity: 1;
        }
    }

    /* Comet Effect */
    .comet {
        position: absolute;
        width: 2px;
        height: 2px;
        background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
        box-shadow: 0 0 10px white;
        border-radius: 50%;
        top: -100px;
        animation: shoot 10s linear infinite;
    }

    @keyframes shoot {
        0% {
            transform: translateX(0) translateY(0) rotate(45deg);
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        20% {
            transform: translateX(100vw) translateY(100vh) rotate(45deg);
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    /* Controls */
    .controls {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 200;
    }

    button {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid var(--accent-color);
        color: white;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        transition: 0.3s;
    }

    button:hover {
        background: var(--accent-color);
        color: black;
    }

    .solar-system {
        position: relative;
        width: 900px;
        height: 900px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scale(0.6);
        /* Scaled down to fit outer planets */
    }

    .sun {
        position: absolute;
        width: 70px;
        height: 70px;
        background: radial-gradient(circle, #fff700 0%, #ff9100 70%, #ff4d00 100%);
        border-radius: 50%;
        box-shadow: 0 0 60px #ff9100;
        z-index: 10;
        cursor: pointer;
    }

    .orbit {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: rotate var(--speed) linear infinite;
        pointer-events: none;

    }

    .paused {
        animation-play-state: paused !important;
    }

    .planet {
        position: absolute;
        border-radius: 50%;
        cursor: pointer;
        transition: box-shadow 0.3s;
        pointer-events: auto;
        z-index: 5;
    }

    .planet:hover {
        box-shadow: 0 0 15px white;
    }

    /* Saturn's Rings */
    .saturn-ring {
        position: absolute;
        width: 60px;
        height: 20px;
        border: 4px solid rgba(194, 174, 128, 0.6);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(15deg);
    }

    /* Orbit Speeds & Sizes */
    .mercury-orbit {
        --speed: 5s;
        width: 140px;
        height: 140px;
    }

    .venus-orbit {
        --speed: 9s;
        width: 200px;
        height: 200px;
    }

    .earth-orbit {
        --speed: 13s;
        width: 280px;
        height: 280px;
    }

    .mars-orbit {
        --speed: 21s;
        width: 360px;
        height: 360px;
    }

    .jupiter-orbit {
        --speed: 35s;
        width: 500px;
        height: 500px;
    }

    .saturn-orbit {
        --speed: 45s;
        width: 640px;
        height: 640px;
    }

    .uranus-orbit {
        --speed: 60s;
        width: 760px;
        height: 760px;
    }

    .neptune-orbit {
        --speed: 80s;
        width: 880px;
        height: 880px;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* Planet Colors & Positions */
    .mercury {
        width: 12px;
        height: 12px;
        background: #A5A5A5;
        top: -6px;
    }

    .venus {
        width: 20px;
        height: 20px;
        background: #E3BB76;
        top: -10px;
    }

    .earth {
        width: 22px;
        height: 22px;
        background: #2271B3;
        top: -11px;
    }

    .mars {
        width: 16px;
        height: 16px;
        background: #E27B58;
        top: -8px;
    }

    .jupiter {
        width: 45px;
        height: 45px;
        background: #D39C7E;
        top: -22px;
    }

    .saturn {
        width: 38px;
        height: 38px;
        background: #C2AE80;
        top: -19px;
    }

    .uranus {
        width: 28px;
        height: 28px;
        background: #BBE1E4;
        top: -14px;
    }

    .neptune {
        width: 28px;
        height: 28px;
        background: #6081FF;
        top: -14px;
    }

    /* Info Card */
    #info-card {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 300px;
        background: rgba(0, 0, 0, 0.9);
        border: 1px solid var(--accent-color);
        padding: 20px;
        border-radius: 10px;
        display: none;
        z-index: 100;
    }

    #info-card h2 {
        margin: 0 0 10px 0;
        color: var(--accent-color);

    }