/* Prevent padding or borders from adding extra width */
* {
box-sizing: border-box;
}

/* Keep the headings centered */
h1, h2, h3 {
    text-align: center;
}

h1 {
    /* Your existing h1 styles */
    font-size: 2.5em;
    text-align: center; /* or left, depending on your preference */

    /* ADD THESE THREE LINES for the dividing line */
    border-bottom: 2px solid; /* 2px thick, solid line style */
    padding-bottom: 5px;      /* Space between text and line */
    margin-bottom: 25px;      /* Space between line and content below */

    /* Ensures the line doesn't span the full screen width unnecessarily */
    display: inline-block;
}

/* Navigation Bar Styling */
nav {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}

nav a {
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
    color: inherit;
}




/* CSS will go here */
/* BASE STYLES: This is the default (Light Mode)
 We use system fonts to match the visitor's OS/browser
 */
/* --- BASE STYLES (DEFAULT/LIGHT MODE) --- */
body {
    /* Optimized Font-Family */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background-color: white;
    color: black;
    padding: 50px;
    text-align: left;
    .content-container {
        max-width: 800px; /* Limits the width of content on very large screens */
        margin: 0 auto;    /* Centers the container horizontally */
        padding: 10px;     /* Adds a little breathing room around the content */
    }
}

/* MOBILE OVERRIDE: Applied only when screen is 600px wide or smaller */

@media screen and (max-width: 600px) {
    /* Step 3: Body Padding Adjustment */
    body {
        padding: 10px 0; /* Minimal vertical padding, and zero horizontal padding */
    }

    /* Step 2: Content Container Adjustment */
    .content-container {
        max-width: 100%; /* OVERRIDE: Allows it to stretch full width */
        width: 100%;     /* Ensure full width is used */
        padding: 0 10px; /* MOBILE PADDING: Adds small space on the left/right */
    }
}

h1 {
    font-size: 2.5em;
}

/* --- DARK MODE STYLES --- */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a; /* Dark background */
        color: #f0f0f0;           /* Light text */
    }
    /* Add any other elements you want to change color for in dark mode */
    h1 {
        color: #ffffff; /* Brighter white for heading */
    }
}