/* Base Mobile */
body {
    font-family: Arial, sans-serif;
    /* Simple, readable font */
    margin: 0;
    /* Remove default browser spacing */
    background: #f9f9f9;
    /* Light gray background */
    color: #222;
    /* Dark text for contrast */
    text-align: center;
    /* Center content on small screens */
}

header {
    background: #ffe08a;
    /* Warm yellow header */
    padding: 1em 0;
    /* Add space above and below */
}

h1 {
    margin: 0;
    /* Remove default top/bottom spacing */
    font-size: 1.8em;
    /* Larger site title */
}

nav {
    margin-top: 0.5em;
    /* small space below the title */
    text-align: center;
    /* centers all the links horizontally */
}

nav a {
    margin: 0 0.5em;
    /* Space between links */
    text-decoration: none;
    /* Remove underlines */
    color: #444;
    /* Dark gray text color */
    font-weight: bold;
    /* Make links stand out */
}

main {
    padding: 1em;
    /* Space around main content */
}

section {
    background: white;
    /* White boxes for each story */
    margin-bottom: 1.5em;
    /* Space between sections */
    padding: 1em;
    /* Space inside each story box */
    border-radius: 8px;
    /* Soft corners */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    /* Light drop shadow for depth */
}

section img {
    width: 100%;
    /* Full width on phones */
    height: auto;
    /* Maintain proportions */
    border-radius: 5px;
    /* Rounded corners for images */
    margin-bottom: 1em;
    /* Space below image */
}

footer {
    background: #222;
    /* Dark background footer */
    color: white;
    /* White text for contrast */
    padding: 1em 0;
    /* Space above/below footer text */
    font-size: 0.9em;
    /* Slightly smaller footer text */
}

/* Small tablets / landscape phones */
@media (min-width: 576px) {
    header {
        background: #ffcc66;
        /* Slightly deeper yellow header */
    }

    nav a {
        display: inline-block;
        /* Line links up horizontally */
        margin: 0 1em;
        /* Add spacing between links */
    }

    section {
        width: 90%;
        /* Slightly narrower story boxes */
        margin: 1em auto;
        /* Center each section */
    }

    section img {
        width: 80%;
        /* Reduce image width a little */
    }
}

/* Tablets / small laptops */
@media (min-width: 720px) {
    body {
        text-align: left;
        /* Left-align text for easier reading */
    }

    header,
    footer {
        text-align: center;
        /* Keep header/footer centered */
    }

    main {
        width: 85%;
        /* Narrow main content area */
        margin: auto;
        /* Center it */
    }

    section {
        width: 80%;
        /* Slightly narrower sections */
        margin: 2em auto;
        /* More spacing between sections */
    }

    section img {
        display: inline-block;
        /* Show image next to text */
        width: 45%;
        /* Image takes up less than half width */
        vertical-align: top;
        /* Align image top with text */
    }

    section p {
        display: inline-block;
        /* Put text next to image */
        width: 50%;
        /* About half the section width */
        vertical-align: top;
        /* Align top edges */
        margin-left: 1em;
        /* Space between image and text */
    }
}

/* Desktop / large screens */
@media (min-width: 992px) {
    header {
        background: #ffaa33;
        /* Deeper orange-yellow for desktop */
        position: relative;
        /* Allow nav positioning inside header */
    }

    nav {
        position: absolute;
        /* Move nav into top-right of header */
        right: 2em;
        /* Distance from right edge */
        top: 1.5em;
        /* Distance from top edge */
    }

    main {
        width: 75%;
        /* Narrow main content area for large screens */
    }

    section {
        width: 70%;
        /* Make stories narrower for readability */
    }

    section img {
        width: 40%;
        /* Slightly smaller images on wide screens */
    }

    footer {
        font-size: 1em;
        /* Normal footer text size */
    }
}