body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-image: url("../images/bg.jpg");
    background-color: #000000;
    background-repeat: repeat-y; /* Repeats the image vertically */
    background-position: top center; /* Starts from the top and centers the image horizontally */
    width: 100%;
    height: 100vh; /* This ensures the body takes the full viewport height */
    background-attachment: fixed;
    color: #fff;
}

header {
    padding: 30px; /* Increased padding */
    color: #fff;
    position: relative;
    z-index: 100; /* Higher z-index than the solar system */
}

header h1 {
    color: #00ffcc;
}


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

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: #00ffcc;
}


.fixed-text {
    position: fixed; /* Keeps the element fixed on the screen */
    top: 20px; /* Distance from the top of the viewport */
    left: 20px; /* Distance from the left side of the viewport */
    z-index: 1000; /* Make sure it's above other content */
    padding: 10px; /* Optional: add some padding */
    font-size: 16px; /* Font size for the text */
}

.fixed-text2 {
    position: fixed; /* Keeps the element fixed on the screen */
    top: 20px; /* Distance from the top of the viewport */
    right: 130px; /* Distance from the left side of the viewport */
    z-index: 1000; /* Make sure it's above other content */
    padding: 10px; /* Optional: add some padding */
    font-size: 16px; /* Font size for the text */
}

.fixed-text3 {
    position: fixed; /* Keeps the element fixed on the screen */
    top: 20px; /* Distance from the top of the viewport */
    right: 20px; /* Distance from the left side of the viewport */
    z-index: 1000; /* Make sure it's above other content */
    padding: 10px; /* Optional: add some padding */
}

.text4 {
    position: fixed; 
    top: 20%;
    right: 10%;
    left: 10%;
    text-align: center;
    z-index: 0; /* Make sure it's above other content */
    padding: 10px; /* Optional: add some padding */
    font-size: 16px; /* Font size for the text */
}

.solar-system {
    display: flex;
    justify-content: center; /* Horizontally centers the solar system */
    align-items: center; /* Vertically centers the solar system */
    height: 100vh; /* Takes full viewport height */
    position: relative;
    z-index: 50;
    margin-top: 0; /* You can adjust this if needed */
    margin-bottom: 0;
}

#solar-system-container {
    position: relative;
    height: 1000px;
    width: 1000px;
    border-radius: 50%;
    margin: 0 auto;
    z-index: 60;
    /* Optional: If you want to ensure the entire system stays centered */
}

#sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    background-color: yellow;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 50px rgba(255, 187, 0, 0.8), 0 0 100px rgba(255, 255, 0, 0.6);
    transform: translate(-50%, -50%); /* This will ensure it's centered */
    z-index: 70;
}

/* Planet container for each orbit */
.planet-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0; /* Centered rotation */
    animation: rotate infinite linear;
    z-index: 80; /* Ensure planet containers stay above solar system and are clickable */
}

/* Individual planets */
.planet {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    z-index: 90; /* Ensure planets are on top of everything */
    background-size: cover; /* Ensure the image covers the entire planet */
    background-position: center; /* Center the image */
    background-repeat: no-repeat;
}

/* Animations for planetary orbits */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.mercury { width: 20px; height: 20px; background-color: rgba(128, 128, 128, 0); }
.venus { width: 30px; height: 30px; background-color: rgba(255, 166, 0, 0); }
.earth { width: 35px; height: 35px; background-color: rgba(0, 0, 255, 0); }
.mars { width: 25px; height: 25px; background-color: rgba(255, 0, 0, 0); }
.jupiter { width: 50px; height: 50px; background-color: rgba(165, 42, 42, 0); }
.saturn { width: 45px; height: 45px; background-color: rgba(218, 165, 32, 0); }
.uranus { width: 40px; height: 40px; background-color: rgba(173, 216, 230, 0); }
.neptune { width: 40px; height: 40px; background-color: rgba(65, 105, 225, 0); }

footer {
    margin-top: 40px;
    padding: 20px;
    background-color: #1a1a1a;
    text-align: center;
    z-index: 100; /* Ensure footer stays above the solar system */
}


/* Add glowing effect to planets */
.planet:hover {
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.6);
}


#disappearingText {
    opacity: 1; /* Initial opacity: fully visible */
    transition: opacity 2s ease; /* Transition effect over 2 seconds */
}

#disappearingText.hidden {
    opacity: 0; /* Final opacity: fully invisible */
}