/* General Body and Page Styles */
body {
    background-color: #000000; /* Pure black background */
    color: #cccccc; /* Light grey text for good contrast on black */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* A clean, modern font stack */
    margin: 0;
    padding: 0;
}

/* Main Content Container */
.main-container {
    max-width: 960px;  /* Prevents content from becoming too wide on large screens */
    margin: 40px auto; /* Centers the container horizontally with space on top/bottom */
    padding: 20px;     /* Space inside the container */
}

/* PART 1: Title and Introduction Styles */
#introduction h1 {
    color: #ffffff;
    font-size: 2.5em; /* 'em' is a scalable unit */
    text-align: center;
    margin-bottom: 20px;
}

#introduction p {
    font-size: 1.1em;
    line-height: 1.6; /* Improves readability */
    text-align: justify;
}

/* PART 2: Contents Styles */
#contents {
    margin-top: 50px; /* Adds space between the intro and contents */
    padding: 20px;
    border: 1px solid #333; /* A subtle border to frame the contents */
    border-radius: 8px;
    background-color: #080808; /* A slightly off-black to distinguish it */
}

#contents h2 {
    text-align: center;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 2em;
}

#contents nav ul {
    list-style-type: none; /* Removes the default bullet points */
    padding-left: 0; /* Removes default indentation */
}

#contents nav ul li {
    margin-bottom: 10px; /* Space between list items */
}

/* Style for the nested lists (races and ship classes) */
#contents nav ul ul {
    padding-left: 30px; /* Indents the sub-items */
    margin-top: 10px; /* Space above the nested list */
}

#contents nav a {
    color: #9e9eff; /* A light blue/purple for links */
    text-decoration: none; /* Removes the default underline */
    font-size: 1.2em;
}

#contents nav a:hover {
    text-decoration: underline; /* Adds underline on hover for clarity */
    color: #ffffff;
}

/* PART 3: Star System Map Styles */
#star-system-map {
    margin-top: 50px; /* Space above the map section */
}

#star-system-map h2 {
    text-align: center;
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 25px;
}

.map-container {
    max-width: 100%; /* Ensures the container fits within the main page layout */
    overflow-x: scroll; /* This is the key property that adds the horizontal scrollbar */
    border: 1px solid #555; /* A subtle border to indicate this is a distinct element */
    background-color: #030303; /* A near-black background for the scroll area */
}

/* This rule ensures the image itself is not scaled down by the browser,
   forcing the container to scroll instead. */
.map-container img {
    max-width: none;
}

/* PART 4: Species Descriptions Styles */
#species {
    margin-top: 50px;
}

#species h2 {
    text-align: center;
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 25px;
}

.race-item {
    display: flex; /* Enables Flexbox layout */
    align-items: center; /* Aligns items to the top */
    gap: 25px; /* Creates a space between the image and the text */
    margin-bottom: 50px; /* Space between each race description block */
}

.race-item img {
    flex-shrink: 0; /* Prevents the image from shrinking if the container is narrow */
}

.race-description h3 {
    margin-top: 0;
    font-size: 1.8em;
    color: #ffffff;
}

.race-description p {
    font-size: 1.1em;
    line-height: 1.6;
    text-align: justify;
}


/* --- EDITABLE RACE TEXT COLORS --- */
/* Change the 8 color values below to tint the text for each race. */
/* I have chosen some placeholder colors that are light and readable. */

.race-1-text p { color: rgb(173, 216, 230); } /* Light Blue */
.race-2-text p { color: rgb(144, 238, 144); } /* Light Green */
.race-3-text p { color: rgb(240, 230, 140); } /* Khaki / Pale Yellow */
.race-4-text p { color: rgb(255, 182, 193); } /* Light Pink */
.race-5-text p { color: rgb(216, 191, 216); } /* Thistle / Light Purple */
.race-6-text p { color: rgb(255, 160, 122); } /* Light Salmon / Orange */
.race-7-text p { color: rgb(175, 238, 238); } /* Pale Turquoise */
.race-8-text p { color: rgb(211, 211, 211); } /* Light Gray */

/* PART 5: Race Relations Table Styles */
#race-relations {
    margin-top: 50px;
}

#race-relations h2 {
    text-align: center;
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 25px;
}

.table-container {
    display: flex;
    justify-content: center; /* Centers the table horizontally */
}

#race-relations table {
    border-collapse: collapse; /* Merges cell borders */
    font-size: 1.2em;
    font-weight: bold;
}

#race-relations th, #race-relations td {
    border: 2px solid #555;
    padding: 12px 15px;
    text-align: center;
    width: 40px; /* Ensures cells are square */
    height: 40px;
}

/* Header cells (top row and first column) */
#race-relations th {
    background-color: #222;
    color: #fff;
}

/* --- RELATIONSHIP CELL COLORS --- */
/* Friendly */
.rel-f { background-color: #2a9d8f; color: #ffffff; }
/* Neutral */
.rel-n { background-color: #e9c46a; color: #000000; }
/* Hostile */
.rel-h { background-color: #e76f51; color: #ffffff; }
/* Complicated */
.rel-c { background-color: #8e7dbe; color: #ffffff; }
/* Total War */
.rel-t { background-color: #e63946; color: #ffffff; }

/* PART 6: Ship Classes Styles */
#ship-classes {
    margin-top: 50px;
}

#ship-classes h2 {
    text-align: center;
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 25px;
}

.ship-item {
    display: flex;
    align-items: center; /* Vertically centers the ship and its description */
    gap: 25px; /* Space between the image and the text */
    margin-bottom: 40px; /* Space between each ship class block */
}

.ship-item img {
    flex-shrink: 0; /* Prevents the image from shrinking */
}

.ship-description h3 {
    margin-top: 0;
    font-size: 1.8em;
    color: #ffffff;
}

.ship-description p {
    font-size: 1.1em;
    line-height: 1.6;
    /* Uses the default text color from the body style */
}

/* PART 7: Ship Class Manufacturing Table Styles */
#class-manufacturing {
    margin-top: 50px;
    margin-bottom: 50px; /* Add some space at the very end of the page */
}

#class-manufacturing h2 {
    text-align: center;
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 25px;
}

#class-manufacturing table {
    border-collapse: collapse;
    font-size: 1.5em; /* Made symbols a bit larger for clarity */
}

#class-manufacturing th, #class-manufacturing td {
    border: 2px solid #555;
    padding: 12px 15px;
    text-align: center;
    width: 40px;
    height: 40px;
}

/* Header cells (top row and first column) */
#class-manufacturing th {
    background-color: #222;
    color: #fff;
    font-size: 0.8em; /* Font size for the letters so the symbols stand out more */
    font-weight: bold;
}

/* --- MANUFACTURING CELL COLORS --- */
/* Yes (Can manufacture) */
.mfg-yes {
    background-color: #a7c957; /* Pale Green */
    color: #000000;
}
/* No (Cannot manufacture) */
.mfg-no {
    background-color: #bc4749; /* Pale Red */
    color: #ffffff;
}

/* PART 8: Footer Styles */
footer {
    text-align: center;
    margin: 60px auto 40px auto; /* Adds space above and below the footer */
    padding-top: 20px;
    max-width: 960px; /* Keeps it aligned with the main content container */
    border-top: 1px solid #333; /* A subtle line to separate it from the content */
}

footer p {
    color: #888; /* A dimmer grey to make it less prominent */
    font-size: 0.9em;
    margin: 5px 0;
}

footer a {
    color: #9e9eff; /* Uses the same link color as the contents section */
    text-decoration: none;
    font-size: 1.1em;
}

footer a:hover {
    text-decoration: underline;
    color: #ffffff;
}

/* Style for small indicator text below a title */
.scroll-indicator,
.tooltip-indicator {
    text-align: center;
    color: #888; /* A dimmer grey color */
    font-style: italic;
    font-size: 0.9em;
    margin-top: -15px; /* Negative margin to pull it closer to the title */
    margin-bottom: 15px; /* Space between the text and the container */
}

/* Reusable "Scroll to top" link style */
.scroll-to-top {
    text-align: center; /* This is the key property to center the link */
    margin: 50px 0; /* Adds generous vertical space to separate it from content */
}

.scroll-to-top a {
    color: #9e9eff; /* Uses the same link color as the contents section */
    text-decoration: none;
    font-size: 1.1em;
}

.scroll-to-top a:hover {
    text-decoration: underline;
    color: #ffffff;
}