body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: radial-gradient(circle at top, #0b1d3a, #000814);
    color: white;
    text-align: center;
    padding: 20px;
    overflow-x: hidden;
    position: relative;
}

#stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.star { position: absolute; border-radius: 50%; background: white; opacity: 0.8; animation: twinkle 2s infinite alternate; }

@keyframes twinkle { from { opacity: 0.2; } to { opacity: 1; } }

h1 { font-size: 28px; margin-bottom: 20px; text-shadow: 0 0 10px #60a5fa, 0 0 20px #3b82f6, 0 0 40px #1d4ed8; }

.tabs button { padding: 10px 20px; margin: 5px; background: #1d4ed8; border: none; border-radius: 6px; color: white; cursor: pointer; }
.tabs button:hover { background: #2563eb; }

#mediaContainer img, .mars-img, .event-img { max-width: 100%; border-radius: 10px; box-shadow: 0 0 15px rgba(255,255,255,0.2); margin-bottom: 10px; }

#marsContainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
#eventsContainer { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.event-card { width: 250px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 10px; text-align: center; }
.event-card img { width: 100%; border-radius: 6px; margin-bottom: 5px; }

.fade-in { opacity: 0; animation: fadeIn 1s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.hidden { display: none; }