/* Basic styles will go here */ 

/* Add custom font */
@font-face {
    font-family: '8BIT WONDER';
    src: url('../fonts/8-BIT WONDER.TTF') format('truetype');
    /* Add other formats like woff/woff2 if available for better compatibility */
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Changed to dark theme colors */
    --primary-bg: #1B2735; /* Dark blue/grey from example */
    --secondary-bg: #090A0F; /* Darker color for gradient end */
    --text-color: #f0f0f0; /* Light text */
    --heading-font: "8BIT WONDER", system-ui; 
    /* Changed body font to Lato */
    --body-font: 'Lato', sans-serif; 
    /* Changed logo color to pastel yellow */
    --logo-color: #bcd9fa; /* Pastel Yellow */
    --color-text: #500dad;
    /* Glow set to Cyan */
    --logo-glow: #00FFFF; /* Cyan */
    --logo-glow-faded: rgba(0, 255, 255, 0.4); /* Cyan with alpha */
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Reverted to dark radial gradient from example */
    background-color: var(--secondary-bg); /* Fallback */
    background-image: radial-gradient(ellipse at bottom, var(--primary-bg) 0%, var(--secondary-bg) 100%);
    color: var(--text-color); /* Use light text color */
    font-family: var(--body-font);
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    padding: 1rem; 
}

main {
    text-align: center;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

h1 {
    font-family: var(--heading-font); /* Restored variable */
    /* font-family: "8BIT WONDER", sans-serif; */ /* Removed direct font-family */
    font-size: 4.1rem; 
    color: var(--logo-color);
    margin-bottom: 2.5rem;
    /* Updated animation duration to slow it down */
    animation: pulse-glow 4s infinite; /* Changed from 2s to 4s */
    /* text-shadow: 0 0 15px red; */ /* Removed direct red shadow */
    /* transform: scaleX(0.9); */
    /* display: inline-block; */ 
}

h2 {
    font-size: 1.8rem; 
    margin-bottom: 1.5rem; /* Increased margin-bottom */
    font-weight: normal;
    color: var(--text-color); /* Ensure subtitles use light text */
}

h3 {
    font-size: 1.6rem; /* Adjust size */
    margin-bottom: 2rem;
    font-weight: normal;
    color: var(--text-color); /* Ensure subtitles use light text */
}

/* Footer Styles */
hr.footer-separator {
    border: none;
    border-top: 1px solid rgba(240, 240, 240, 0.2); /* Lighter separator on dark bg */
    width: 80%;
    max-width: 800px;
    margin: 3rem auto 1.5rem auto; 
}

footer {
    width: 100%;
    max-width: 800px; 
    margin: 0 auto; 
    padding: 0 1rem 1.5rem 1rem; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem; 
    text-align: center;
    margin-top: 0; 
}

footer a {
    color: var(--text-color); /* Light links */
    text-decoration: none;
    /* Removed margin from base 'a' */
    font-size: 0.9rem;
}

footer a:hover {
    text-decoration: underline;
}

footer .footer-left {
    display: flex;
    gap: 1rem; /* Spacing between buttons */
    justify-content: center; /* Center buttons if they wrap */
    flex-grow: 1; /* Allow left side to grow */
}

footer .footer-left a {
    /* Button Styling */
    padding: 0.6rem 1.2rem; /* Increased padding */
    border: 1px solid var(--logo-color); /* Keep purple border */
    border-radius: 25px; /* Rounded corners */
    font-size: 1rem; /* Increased font size */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin: 0; /* Reset margin */
    color: var(--text-color); /* Ensure button text is light */
}

footer .footer-left a:hover {
    background-color: rgba(148, 0, 255, 0.1); /* Subtle purple glow on hover */
    text-decoration: none;
}

footer .footer-right {
    display: flex;
    gap: 1rem; /* Spacing between copyright and version */
    justify-content: center; /* Center text if it wraps */
    flex-grow: 1;
    text-align: right;
}

footer .copyright,
footer .version {
    font-size: 0.8rem;
    color: rgba(240, 240, 240, 0.7); /* Dimmer light text */
}

/* Responsive adjustments for footer */
@media (max-width: 600px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.2rem;
    }
    h3 {
        font-size: 1rem;
    }
    footer {
        flex-direction: column;
        gap: 1.5rem;
    }
    footer .footer-left {
        order: 1; /* Buttons first */
        gap: 0.8rem;
    }
     footer .footer-right {
        order: 2; /* Copyright/version second */
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    footer .footer-left a {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
} 

/* Updated Keyframes for heartbeat effect */
@keyframes pulse-glow {
    0% {
        text-shadow: 
            0 0 3px var(--logo-glow-faded),
            0 0 5px var(--logo-glow-faded),
            0 0 3px var(--logo-glow-faded);
    }
    50% { /* Quick rise to peak */
        text-shadow: 
            0 0 0px var(--logo-glow), 
            0 0 0px var(--logo-glow),
            0 0 200px var(--logo-glow); /* Slightly larger max glow at peak */
    } 
    100% { /* Slower fade back to faded state */
         text-shadow: 
            0 0 3px var(--logo-glow-faded),
            0 0 5px var(--logo-glow-faded),
            0 0 3px var(--logo-glow-faded);
    }
} 

/* --- Removed Star Field Styles --- */ 

/* Canvas for Starfield */
#starfield-canvas {
    position: fixed; /* Fixed position to stay in background */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place it behind all other content */
    pointer-events: none; /* Allow clicks to pass through */
} 

/* Animation for the typing ellipses */
@keyframes ellipses-animation {
  0%, 100% { content: ''; }
  25% { content: ' .'; }
  50% { content: ' . .'; }
  75% { content: ' . . .'; }
}

h3 .ellipses::after {
  content: '.'; /* Initial state */
  display: inline-block;
  width: 1.2em; /* Reserve space to prevent layout shift */
  text-align: left;
  vertical-align: bottom;
  animation: ellipses-animation 4s infinite; /* Match h1 glow duration */
}