/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box; /* Makes width/height include padding and border */
    margin: 0; /* Removes default margins */
    padding: 0; /* Removes default padding */
}

/* ==========================================================================
   Custom Properties
   ========================================================================== */
:root {
    --color-primary: #000000; /* Main background color (black) */
    --color-accent: #7576ff; /* Neon green for hover effects */
    --color-text: #ffffff; /* Main text color - updated to neon green */
    --color-heading: #0fffa9; /* Heading color - white */
    --color-footer-text: #c6c6c6; /* Footer text color */
    --font-terminal: Roboto; /* Main font */
    --font-heading: Roboto; /* Header font */
    --max-width: 800px; /* Content width limit */
}

/* ==========================================================================
   Typography
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); /* Terminal style font */

/* ==========================================================================
   Base HTML Elements
   ========================================================================== */
html {
    height: 100%; /* Full viewport height */
    font-size: 16px; /* Base font size */
    scroll-behavior: smooth; /* Smooth scrolling */
}

body {
    background-image: url('../images/background_stars.gif'); /* Star background */
    background-color: var(--color-primary); /* Fallback color */
    background-repeat: repeat; /* Tile background */
    background-attachment: fixed; /* Fixed background */
    color: var(--color-text); /* Text color now neon green */
    font-family: var(--font-terminal); /* Base font */
    min-height: 100vh; /* Minimum viewport height */
    margin: 0; /* No margins */
    display: flex; /* Flex layout */
    flex-direction: column; /* Stack content */
    cursor: url('../images/cursor.cur'), auto; /* Custom cursor */
}

/* Links - Global styles for all anchor tags */
a {
    cursor: url('../images/cursor_link.cur'), pointer; /* Custom link cursor */
}

/* ==========================================================================
   Header Section
   ========================================================================== */
.header {
    text-align: center; /* Center content */
    padding: 1.5rem 1rem; /* Spacing */
    display: flex; /* Flex layout */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    gap: 20px; /* Space between items */
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent background */
}

.header h1 {
    font-family: var(--font-heading); /* Special font */
    font-size: 2.5rem; /* Large size */
    letter-spacing: 0.07em; /* Letter spacing */
    text-transform: uppercase; /* All caps */
    color: var(--color-heading); /* White color */
}

.banner-gif {
    height: 3.5em; /* Match title height */
    vertical-align: middle; /* Align with text */
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
    text-align: center; /* Center content */
    padding: 0.5rem; /* Spacing */
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent background */
}

.nav ul {
    list-style: none; /* No bullets */
    display: flex; /* Flex layout */
    justify-content: center; /* Center items */
    gap: 1.5rem; /* Space between items */
    flex-wrap: wrap; /* Allow wrapping */
}

.nav li {
    display: inline-block; /* Inline layout */
}

.nav a {
    color: var(--color-heading); /* White text for navigation */
    text-decoration: none; /* No underline */
    padding: 0.25rem 0.5rem; /* Clickable area */
    transition: all 0.3s ease; /* Smooth transition */
    font-size: 0.9rem; /* Smaller text */
    font-weight: bold; /* Bold text */
}

.nav a:hover,
.nav a:focus {
    background-color: var(--color-accent); /* Hover background */
    color: #000000; /* Hover text */
    text-shadow: 0 0 5px var(--color-accent); /* Glow effect */
}

.nav a[aria-current="page"] {
    text-decoration: underline; /* Show current page */
    font-weight: bold; /* Bold current page */
}

/* ==========================================================================
   Main Content
   ========================================================================== */
.main-content {
    max-width: var(--max-width); /* Width limit */
    margin: 2rem auto; /* Center and space */
    padding: 2rem 1rem; /* Inner spacing */
    flex: 1; /* Fill space */
    background-color: rgba(0, 0, 0, 0.8); /* Background */
    border-radius: 8px; /* Rounded corners */
}

/* Section Headers */
.section-header {
    display: flex; /* Flex layout */
    align-items: center; /* Center vertically */
    gap: 1rem; /* Space between */
    margin-bottom: 1rem; /* Bottom space */
}

.header-icon {
    height: 2.5rem; /* Icon height */
    width: auto; /* Maintain ratio */
}

/* Content Typography */
.main-content h2, .main-content h3 {
    font-family: var(--font-heading); /* Special font */
    color: var(--color-accent); /* Blue text */
    margin-bottom: 1rem; /* Bottom space */
}

.main-content h2 {
    font-size: 1.8rem; /* Large size */
}

.main-content h3 {
    font-size: 1.5rem; /* Medium size */
    margin: 1.5rem 0 1rem; /* Spacing */
}

/* Divider Image */
.divider-image {
    display: block; /* Makes image a block element */
    margin: 1rem auto; /* Centers image horizontally with space above/below */
}

/* Book List */
.main-content ol {
    list-style-position: inside; /* Bullet position */
    padding-left: 1rem; /* List indent */
}

.main-content ol li {
    margin-bottom: 1rem; /* Space between items */
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    text-align: center; /* Center content */
    padding: 0.25rem; /* Spacing */
    font-size: 0.8rem; /* Smaller text */
}

.footer ul {
    list-style: none; /* No bullets */
    display: flex; /* Flex layout */
    justify-content: center; /* Center items */
    gap: 1rem; /* Space between */
    flex-wrap: wrap; /* Allow wrapping */
}

.footer li {
    display: inline-block; /* Inline layout */
    color: var(--color-footer-text); /* Text color */
}

.footer a {
    color: var(--color-footer-text); /* Link color */
    text-decoration: none; /* No underline */
    padding: 0.15rem 0.3rem; /* Clickable area */
    transition: all 0.3s ease; /* Smooth transition */
    font-weight: bold; /* Bold text */
}

.footer a:hover,
.footer a:focus {
    background-color: var(--color-accent); /* Hover background */
    color: #000000; /* Hover text */
    text-shadow: 0 0 5px var(--color-accent); /* Glow effect */
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 600px) {
    html {
        font-size: 14px; /* Smaller base font */
    }

    .header h1 {
        font-size: 2rem; /* Smaller title */
    }

    .nav ul,
    .footer ul {
        flex-direction: column; /* Stack items */
        gap: 0.5rem; /* Reduced spacing */
    }
}

/* Print Styles */
@media print {
    body {
        background: white; /* White background */
        color: black; /* Black text */
        background-image: none; /* No background */
    }

    .nav {
        display: none; /* Hide nav */
    }
}