/* Base Styles & Variables */
:root {
    --bg-light: #f8f9fa;
    --text-light: #212529;
    --secondary-text-light: #6c757d;
    --card-bg-light: #ffffff;
    --card-border-light: #e9ecef;
    --link-light: #007bff;
    --header-bg-light: rgba(255, 255, 255, 0.8);
    --nav-link-light: #495057;
    --nav-link-hover-light: #007bff;
    --aura-glow: 0 0 20px rgba(0, 123, 255, 0.15);

    --bg-dark: #000011; /* Deep space black */
    --text-dark: #f0f0f0; /* Muted Matrix white for readability */
    --secondary-text-dark: #cccccc;
    --card-bg-dark: rgba(30, 30, 30, 0.95);
    --card-border-dark: rgba(0, 200, 255, 0.3); /* Cyan borders */
    --link-dark: #80d4ff; /* Soft cyan links */
    --header-bg-dark: rgba(18, 18, 18, 0.95);
    --nav-link-dark: #b0b0b0;
    --nav-link-hover-dark: #ffffff;
    --aura-glow-dark: 0 0 20px rgba(0, 200, 255, 0.2);
}

/* Galaxy Background Animation */
@keyframes starFlicker {
    0%, 80%, 100% { opacity: 0.6; } /* Reduced max brightness */
    95% { opacity: 0.15; } /* More subtle dimming */
}

@keyframes shootingStar {
    0% { transform: translateX(-200px) translateY(-200px) rotate(45deg); opacity: 0; }
    5% { opacity: 1; }
    99% { opacity: 1; }
    100% { transform: translateX(200px) translateY(200px) rotate(45deg); opacity: 0; }
}

@keyframes shootingStar2 {
    0% { transform: translateX(200px) translateY(200px) rotate(-45deg); opacity: 0; }
    5% { opacity: 1; }
    99% { opacity: 1; }
    100% { transform: translateX(-200px) translateY(-200px) rotate(-45deg); opacity: 0; }
}

@keyframes shootDown {
    0% { transform: translateX(0px) translateY(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(300px) translateY(200px); opacity: 0; }
}

@keyframes shootUp {
    0% { transform: translateX(0px) translateY(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(-300px) translateY(-200px); opacity: 0; }
}

.galaxy-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    transform: translateY(calc(var(--scroll-y, 0px) * -0.3));
}

.galaxy-stars::before {
    content: '';
    position: absolute;
    width: 300%;
    height: 200%;
    top: -50%;
    left: -100%;
    background-attachment: local;
    background:
        radial-gradient(ellipse 30% 50% at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 40% 70%, rgba(120, 200, 255, 0.08) 0%, transparent 80%),
        radial-gradient(ellipse 70% 30% at 10% 30%, rgba(158, 120, 255, 0.1) 0%, transparent 90%);
    pointer-events: none;
    z-index: 0;
}

/* Shooting stars - very rare and varied */
.galaxy-stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 0 0 3px white;
    top: 20%;
    left: 50%;
    animation: shootingStar 5s infinite;
    animation-delay: -150s; /* Very rare */
    pointer-events: none;
    z-index: 1;
}

/* Static and flickering stars */
.galaxy-stars span {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    opacity: 1;
    animation: starFlicker 10s infinite ease-in-out;
}

.galaxy-stars span.flicker-off {
    animation: none;
    opacity: 0.8;
}

/* Individual stars positioned randomly */
.galaxy-stars span:nth-child(1) { width: 1px; height: 1px; left: 10%; top: 20%; }
.galaxy-stars span:nth-child(2) { width: 2px; height: 2px; left: 20%; top: 35%; }
.galaxy-stars span:nth-child(3) { width: 1px; height: 1px; left: 30%; top: 50%; }
.galaxy-stars span:nth-child(4) { width: 1px; height: 1px; left: 40%; top: 15%; }
.galaxy-stars span:nth-child(5) { width: 2px; height: 2px; left: 50%; top: 70%; }
.galaxy-stars span:nth-child(6) { width: 1px; height: 1px; left: 60%; top: 25%; }
.galaxy-stars span:nth-child(7) { width: 1px; height: 1px; left: 70%; top: 80%; }
.galaxy-stars span:nth-child(8) { width: 2px; height: 2px; left: 80%; top: 45%; }
.galaxy-stars span:nth-child(9) { width: 1px; height: 1px; left: 85%; top: 30%; }
.galaxy-stars span:nth-child(10) { width: 1px; height: 1px; left: 15%; top: 65%; }
.galaxy-stars span:nth-child(11) { width: 2px; height: 2px; left: 25%; top: 55%; }
.galaxy-stars span:nth-child(12) { width: 1px; height: 1px; left: 35%; top: 75%; }
.galaxy-stars span:nth-child(13) { width: 1px; height: 1px; left: 45%; top: 40%; }
.galaxy-stars span:nth-child(14) { width: 2px; height: 2px; left: 55%; top: 10%; }
.galaxy-stars span:nth-child(15) { width: 1px; height: 1px; left: 65%; top: 90%; }
.galaxy-stars span:nth-child(16) { width: 1px; height: 1px; left: 75%; top: 5%; }
.galaxy-stars span:nth-child(17) { width: 2px; height: 2px; left: 5%; top: 85%; }
.galaxy-stars span:nth-child(18) { width: 1px; height: 1px; left: 95%; top: 50%; }
.galaxy-stars span:nth-child(19) { width: 1px; height: 1px; left: 12%; top: 72%; }
.galaxy-stars span:nth-child(20) { width: 2px; height: 2px; left: 22%; top: 18%; }
.galaxy-stars span:nth-child(21) { width: 1px; height: 1px; left: 32%; top: 85%; }
.galaxy-stars span:nth-child(22) { width: 1px; height: 1px; left: 42%; top: 28%; }
.galaxy-stars span:nth-child(23) { width: 2px; height: 2px; left: 52%; top: 65%; }
.galaxy-stars span:nth-child(24) { width: 1px; height: 1px; left: 62%; top: 12%; }
.galaxy-stars span:nth-child(25) { width: 1px; height: 1px; left: 72%; top: 92%; }
.galaxy-stars span:nth-child(26) { width: 2px; height: 2px; left: 82%; top: 35%; }
.galaxy-stars span:nth-child(27) { width: 1px; height: 1px; left: 88%; top: 68%; }
.galaxy-stars span:nth-child(28) { width: 1px; height: 1px; left: 18%; top: 15%; }
.galaxy-stars span:nth-child(29) { width: 2px; height: 2px; left: 28%; top: 78%; }
.galaxy-stars span:nth-child(30) { width: 1px; height: 1px; left: 38%; top: 22%; }
.galaxy-stars span:nth-child(31) { width: 1px; height: 1px; left: 48%; top: 88%; }
.galaxy-stars span:nth-child(32) { width: 2px; height: 2px; left: 58%; top: 32%; }
.galaxy-stars span:nth-child(33) { width: 1px; height: 1px; left: 68%; top: 48%; }
.galaxy-stars span:nth-child(34) { width: 1px; height: 1px; left: 78%; top: 8%; }
.galaxy-stars span:nth-child(35) { width: 2px; height: 2px; left: 3%; top: 62%; }
.galaxy-stars span:nth-child(36) { width: 1px; height: 1px; left: 97%; top: 25%; }

* {
    box-sizing: border-box;
}

html {
    font-size: clamp(14px, 2.5vw, 18px); /* Base fluid font size */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #000011 0%, #000033 25%, #000055 50%, #000033 75%, #000011 100%);
    background-attachment: fixed;
    color: var(--text-light);
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    overflow-x: hidden;
}

/* Removed green overlay - no Matrix */

.container {
    width: 90%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}