/* Cosmic Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Universal Styling */
    body {
      font-family: 'Space Mono', monospace;
      background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
      color: #f0f0f0;
      overflow-x: hidden;
      min-height: 100vh;
    }

    h1, h2, h3 {
      font-family: 'Orbitron', sans-serif;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    /* Cosmic Background */
    .cosmos {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }

    .stars {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="white" opacity="0.6"/></svg>') repeat;
      background-size: 2%;
      animation: twinkle 10s infinite alternate;
    }

    .stars:nth-child(2) {
      background-size: 1.5%;
      animation-delay: -5s;
    }

    .stars:nth-child(3) {
      background-size: 1%;
      animation-delay: -7s;
    }

    @keyframes twinkle {
      0% { opacity: 0.2; }
      100% { opacity: 0.8; }
    }

    /* Shooting Stars */
    .shooting-star {
      position: absolute;
      top: 0;
      left: 50%;
      width: 4px;
      height: 4px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
                  0 0 0 8px rgba(255, 255, 255, 0.1),
                  0 0 20px rgba(255, 255, 255, 1);
      animation: shoot 15s linear infinite;
    }

    .shooting-star::before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 300px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 1), transparent);
    }

    .shooting-star:nth-child(1) {
      top: 10%;
      left: 20%;
      animation-delay: 0s;
      animation-duration: 10s;
    }

    .shooting-star:nth-child(2) {
      top: 25%;
      left: 80%;
      animation-delay: 3s;
      animation-duration: 12s;
    }

    .shooting-star:nth-child(3) {
      top: 60%;
      left: 10%;
      animation-delay: 7s;
      animation-duration: 8s;
    }

    @keyframes shoot {
      0% {
        transform: rotate(215deg) translateX(0);
        opacity: 1;
      }
      70% {
        opacity: 1;
      }
      100% {
        transform: rotate(215deg) translateX(-1000px);
        opacity: 0;
      }
    }

    /* Header Styling */
    header {
      text-align: center;
      padding: 3rem 1rem;
      position: relative;
      overflow: hidden;
    }

    header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at center, rgba(0, 195, 255, 0.1) 0%, transparent 70%);
      z-index: -1;
    }

    header h1 {
      font-size: clamp(2.5rem, 5vw, 4rem);
      color: #00c3ff;
      text-shadow: 0 0 10px rgba(0, 195, 255, 0.5),
                   0 0 20px rgba(0, 195, 255, 0.3),
                   0 0 30px rgba(0, 195, 255, 0.1);
      margin-bottom: 0.5rem;
      animation: pulse 4s infinite alternate;
    }

    @keyframes pulse {
      0% { text-shadow: 0 0 10px rgba(0, 195, 255, 0.5), 0 0 20px rgba(0, 195, 255, 0.3), 0 0 30px rgba(0, 195, 255, 0.1); }
      100% { text-shadow: 0 0 15px rgba(0, 195, 255, 0.8), 0 0 30px rgba(0, 195, 255, 0.5), 0 0 45px rgba(0, 195, 255, 0.2); }
    }

    header p {
      font-size: clamp(1rem, 2vw, 1.5rem);
      color: #ccc;
      max-width: 800px;
      margin: 0 auto;
    }

    /* Navigation */
    .navbar {
      background: rgba(14, 26, 43, 0.9);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid rgba(0, 195, 255, 0.2);
    }

    .navbar ul {
      display: flex;
      justify-content: center;
      list-style: none;
      padding: 1rem;
      gap: 2rem;
    }

    .navbar a {
      text-decoration: none;
      color: #f0f0f0;
      font-weight: bold;
      font-family: 'Orbitron', sans-serif;
      letter-spacing: 1px;
      padding: 0.5rem 1rem;
      position: relative;
      transition: all 0.3s ease;
    }

    .navbar a::before {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background: linear-gradient(90deg, #00c3ff, #00e0ff);
      transition: width 0.3s;
    }

    .navbar a:hover {
      color: #00e0ff;
    }

    .navbar a:hover::before {
      width: 100%;
    }

    /* Main Content */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }

    section {
      margin-bottom: 3rem;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 15px;
      padding: 2rem;
      border: 1px solid rgba(0, 195, 255, 0.1);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    section::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 20% 30%, rgba(0, 195, 255, 0.05) 0%, transparent 50%);
      pointer-events: none;
      z-index: -1;
    }

    section:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 195, 255, 0.2);
      border-color: rgba(0, 195, 255, 0.3);
    }

    section h2 {
      color: #00e0ff;
      margin-bottom: 1.5rem;
      font-size: 1.8rem;
      position: relative;
      display: inline-block;
    }

    section h2::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, #00c3ff, transparent);
    }

    /* Planet Grid */
    .planet-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }

    .planet-card {
      background: rgba(14, 26, 43, 0.7);
      border-radius: 15px;
      overflow: hidden;
      transition: all 0.5s ease;
      position: relative;
      border: 1px solid rgba(0, 195, 255, 0.1);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .planet-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 15px 30px rgba(0, 195, 255, 0.2);
      border-color: rgba(0, 195, 255, 0.4);
    }

    .planet-image {
      height: 200px;
      position: relative;
      overflow: hidden;
    }

    .planet-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 5s ease;
    }

    .planet-card:hover .planet-image img {
      transform: scale(1.1);
    }

    .planet-image::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to top, rgba(14, 26, 43, 0.9) 0%, transparent 50%);
    }

    .planet-info {
      padding: 1.5rem;
      position: relative;
    }

    .planet-info h3 {
      color: #00e0ff;
      margin-bottom: 0.5rem;
      font-size: 1.5rem;
    }

    .planet-info p {
      color: #ccc;
      margin-bottom: 0.5rem;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    .planet-info p strong {
      color: #00c3ff;
    }

    /* Planet Specific Styling */
    #mercury .planet-image { background: linear-gradient(to bottom, #9c9c9c, #5a5a5a); }
    #venus .planet-image { background: linear-gradient(to bottom, #e6b062, #b37439); }
    #earth .planet-image { background: linear-gradient(to bottom, #1da1f2, #0d47a1); }
    #mars .planet-image { background: linear-gradient(to bottom, #c1440e, #8b2e0a); }
    #jupiter .planet-image { background: linear-gradient(to bottom, #d39c7c, #a56b4a); }
    #saturn .planet-image { background: linear-gradient(to bottom, #e3d8b5, #c4b483); }
    #uranus .planet-image { background: linear-gradient(to bottom, #a6e1fa, #5dacd1); }
    #neptune .planet-image { background: linear-gradient(to bottom, #4b70dd, #1a4b8c); }

    /* Satellite Section */
    #satellites {
      text-align: center;
    }

    .satellite-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .satellite {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(0, 195, 255, 0.2);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .satellite::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at center, rgba(0, 195, 255, 0.1) 0%, transparent 70%);
      border-radius: 50%;
    }

    .satellite:hover {
      transform: scale(1.1) rotate(10deg);
      box-shadow: 0 0 20px rgba(0, 195, 255, 0.3);
    }

    .satellite span {
      font-size: 0.8rem;
      color: #00e0ff;
      text-align: center;
      padding: 0.5rem;
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 2rem;
      background: rgba(10, 15, 26, 0.8);
      color: #888;
      font-size: 0.9rem;
      border-top: 1px solid rgba(0, 195, 255, 0.1);
      position: relative;
    }

    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.3), transparent);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .navbar ul {
        flex-direction: column;
        gap: 0.5rem;
      }

      .planet-grid {
        grid-template-columns: 1fr;
      }

      section {
        padding: 1.5rem;
      }
    }

    /* Special Effects */
    .floating {
      animation: floating 6s ease-in-out infinite;
    }

    @keyframes floating {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0px); }
    }

    .rotate {
      animation: rotate 20s linear infinite;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .pulse {
      animation: pulse 2s infinite alternate;
    }

    /* Scroll Indicator */
    .scroll-indicator {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(0, 195, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 10;
      border: 1px solid rgba(0, 195, 255, 0.3);
    }

    .scroll-indicator:hover {
      background: rgba(0, 195, 255, 0.4);
      transform: scale(1.1);
    }

    .scroll-indicator::after {
      content: '↑';
      color: #00e0ff;
      font-size: 1.5rem;
    }