<header class="header">
        <h1>Welcome to Our Solar System</h1>
        <p>Discover the wonders of the Sun, planets, moons, and everything else that makes our solar system extraordinary.</p>
    </header>

    <!-- Solar System Animation Box -->
    <section class="solar-system-animation">
        <div class="solar-system">
            <div class="sun"></div>
            <div class="planet-orbit">
                <div class="orbiting-planet mercury"></div>
            </div>
            <div class="planet-orbit">
                <div class="orbiting-planet venus"></div>
            </div>
            <div class="planet-orbit">
                <div class="orbiting-planet earth"></div>
            </div>
            <div class="planet-orbit">
                <div class="orbiting-planet mars"></div>
            </div>
            <div class="planet-orbit">
                <div class="orbiting-planet jupiter"></div>
            </div>
        </div>
    </section>

    <!-- Solar System Overview Section -->
    <section class="solar-system-overview">
        <h2>About Our Solar System</h2>
        <p>Our solar system is home to the Sun, eight planets, dozens of moons, countless asteroids, comets, and other celestial objects. Located in the Milky Way galaxy, it's the only place we know of that harbors life – on Earth.</p>
    </section>

    <!-- Planets Section -->
    <section class="planets">
        <h2>Planets of the Solar System</h2>

        <!-- Mercury -->
        <article class="planet-article" data-facts="Mercury is heavily cratered like the Moon and has no natural satellites.">
            <h3>Mercury</h3>
            <p>Mercury is the closest planet to the Sun and the smallest in our solar system. It has no atmosphere, and its surface temperatures vary drastically between day and night.</p>
            <ul>
                <li>Distance from Sun: 57.9 million km</li>
                <li>Orbital Period: 88 Earth days</li>
                <li>Moons: None</li>
            </ul>
        </article>

        <!-- Venus -->
        <article class="planet-article" data-facts="Venus spins in the opposite direction of most planets and has no natural satellites.">
            <h3>Venus</h3>
            <p>Venus is the second planet from the Sun and is known for its thick, toxic atmosphere. Its surface is hotter than any other planet in the solar system due to the greenhouse effect.</p>
            <ul>
                <li>Distance from Sun: 108.2 million km</li>
                <li>Orbital Period: 225 Earth days</li>
                <li>Moons: None</li>
            </ul>
        </article>

        <!-- Earth -->
        <article class="planet-article" data-facts="Earth is the third planet from the Sun and the only planet known to support life. It has one natural satellite, the Moon.">
            <h3>Earth</h3>
            <p>Earth is the third planet from the Sun and the only planet known to support life. It has one natural satellite, the Moon.</p>
            <ul>
                <li>Distance from Sun: 149.6 million km</li>
                <li>Orbital Period: 365.25 Earth days</li>
                <li>Moons: 1 (Moon)</li>
            </ul>
        </article>

        <!-- Mars -->
        <article class="planet-article" data-facts="Mars has the largest volcano in the solar system, Olympus Mons, and two moons, Phobos and Deimos.">
            <h3>Mars</h3>
            <p>Mars, the fourth planet from the Sun, is often called the 'Red Planet' because of its reddish appearance caused by iron oxide on its surface.</p>
            <ul>
                <li>Distance from Sun: 227.9 million km</li>
                <li>Orbital Period: 687 Earth days</li>
                <li>Moons: 2 (Phobos, Deimos)</li>
            </ul>
        </article>

        <!-- Add more planets similarly... -->
    </section>

    <!-- Footer -->
    <footer class="footer">
        <p>&copy; 2024 Solar System Exploration. All rights reserved @ishratjahanpinky.</p>
    </footer>

body {
            margin: 0;
            font-family: 'Arial', sans-serif;
            color: #fff;
            background: linear-gradient(to bottom, #000428, #004e92);
            background-size: cover;
            overflow-x: hidden;
        }

        /* Header Styling */
        .header {
            text-align: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
        }

        .header h1 {
            font-size: 3rem;
            margin: 0;
        }

        .header p {
            font-size: 1.2rem;
        }

        /* Section Styles */
        section {
            padding: 20px;
            margin: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        }

        h2 {
            font-size: 2rem;
            border-bottom: 2px solid #fff;
            padding-bottom: 10px;
        }

        /* Article (Planet) Styling */
        article.planet-article {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.05);
            transition: transform 0.3s ease, background 0.3s ease;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        article.planet-article:hover {
            transform: scale(1.02);
            background: rgba(255, 255, 255, 0.15);
        }

        h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            padding: 5px 0;
        }

        /* Tooltip Styles */
        .tooltip {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 8px;
            border-radius: 4px;
            font-size: 14px;
            pointer-events: none;
            z-index: 1000;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            max-width: 250px;
        }

        /* Footer Styling */
        .footer {
            text-align: center;
            padding: 10px;
            background: rgba(0, 0, 0, 0.8);
        }

        /* Responsive Layout */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2.5rem;
            }

            h2 {
                font-size: 1.8rem;
            }

            article.planet-article {
                padding: 15px;
            }
        }

        /* Solar System Animation Box */
        .solar-system-animation {
            width: 800px;
            height: 350px;
            margin: 0 auto;
            position: relative;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 15px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .solar-system {
            width: 400px;
            height: 400px;
            position: relative;
        }

        .sun {
            width: 60px;
            height: 60px;
            background: radial-gradient(circle, #ffa500, #ff4500);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .planet-orbit {
            position: absolute;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            animation: rotate 20s infinite linear;
        }

        .orbiting-planet {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);
        }

        .mercury {
            background: gray;
            width: 8px;
            height: 8px;
            animation: rotate 3s infinite linear;
        }

        .venus {
            background: orange;
            width: 12px;
            height: 12px;
            animation: rotate 7s infinite linear;
        }

        .earth {
            background: blue;
            animation: rotate 10s infinite linear;
        }

        .mars {
            background: red;
            animation: rotate 12s infinite linear;
        }

        .jupiter {
            background: brown;
            width: 30px;
            height: 30px;
            animation: rotate 18s infinite linear;
        }

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

    document.querySelectorAll('.planet-article').forEach(planet => {
      planet.addEventListener('mouseenter', function () {
        let tooltip = document.createElement('div');
        tooltip.className = 'tooltip';
        tooltip.innerText = planet.getAttribute('data-facts');
        document.body.appendChild(tooltip);
        tooltip.style.top = planet.getBoundingClientRect().top + window.scrollY + 'px';
        tooltip.style.left = planet.getBoundingClientRect().left + 'px';
        tooltip.style.display = 'block';
      });

      planet.addEventListener('mouseleave', function () {
        document.querySelector('.tooltip').remove();
      });
    });

    // Light/Dark Mode Toggle
    const toggleButton = document.createElement('button');
    toggleButton.innerText = 'Toggle Light/Dark Mode';
    toggleButton.style.position = 'fixed';
    toggleButton.style.bottom = '10px';
    toggleButton.style.right = '10px';
    toggleButton.style.padding = '10px';
    toggleButton.style.borderRadius = '5px';
    toggleButton.style.border = 'none';
    toggleButton.style.cursor = 'pointer';
    document.body.appendChild(toggleButton);

    toggleButton.addEventListener('click', () => {
      document.body.classList.toggle('light-mode');
      if (document.body.classList.contains('light-mode')) {
        document.body.style.background = 'linear-gradient(to bottom, #fff, #e4e5e6)';
        document.body.style.color = '#000';
      } else {
        document.body.style.background = 'linear-gradient(to bottom, #000428, #004e92)';
        document.body.style.color = '#fff';
      }
    });