body {
            font-family: 'Helvetica', 'Arial', sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #3d3d3d;
            color: white;
            padding: 20px 10px;
            text-align: center;
        }
        nav {
            background-color: #4f4f4f;
            color: white;
            padding: 10px 10px;
            text-align: center;
        }
        nav a {
            color: #f0f0f0;
            margin: 0 10px;
            text-decoration: none;
        }
        nav a:hover {
            text-decoration: underline;
        }
        main {
            max-width: 960px;
            margin: 20px auto;
            padding: 0 15px;
            background-color: #ffffff;
            border: 1px solid #ddd;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        /* Use block display and overflow for tables so they are scrollable on small screens. */
        table {
            width: 100%;
            border-collapse: collapse;
            overflow-x: auto;
            display: block;
        }
        th, td {
            padding: 12px 8px;
            border-bottom: 1px solid #ddd;
            text-align: left;
            white-space: nowrap;
        }
        tr:nth-child(even) {
            background-color: #f7f7f7;
        }
        th {
            background-color: #f0f0f0;
        }
        .post-title {
            color: #2a6496;
            text-decoration: none;
        }
        .post-title:hover {
            text-decoration: underline;
        }
        .topics-list {
            margin-bottom: 15px;
        }
        .topics-list a {
            margin-right: 10px;
        }
        footer {
            text-align: center;
            font-size: 0.9em;
            padding: 20px;
            color: #666;
        }
        .breadcrumb {
            font-size: 0.9em;
            margin-bottom: 15px;
        }
        .breadcrumb a {
            color: #2a6496;
            text-decoration: none;
        }
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        .content {
            line-height: 1.6em;
            word-wrap: break-word;
        }
        /* Primary and secondary advertisement styles */
        /* The primary ad stretches across the full width of the content area.  We cap
           its height so large banners don't dominate the page, and use
           object-fit: contain to preserve aspect ratio. */
        .ad-primary {
            text-align: center;
            margin: 10px 0;
            /* Maintain the 970×250 aspect ratio while scaling responsively.
               The aspect-ratio property ensures the height scales with the width on
               larger screens, while max-height prevents the banner from
               becoming too tall on wider layouts. */
            width: 100%;
            aspect-ratio: 970 / 250;
            max-height: 250px;
            overflow: hidden;
        }
        .ad-primary img {
            /* Show the entire image without cropping.  The image will scale
               to fit within the container while preserving its aspect ratio. */
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: inline-block;
        }
        /* Secondary ads are arranged in a flex container with equal spacing. Each
           secondary ad uses a fixed width and height to achieve a uniform appearance.
           On very small screens the ads will wrap naturally. */
        .ad-secondary-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin: 10px 0;
        }
        .ad-secondary-container a {
            display: block;
            width: 300px;
            height: 150px;
            flex: 0 0 300px;
            overflow: hidden;
        }
        .ad-secondary-container img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
        /* Responsive adjustments for smaller screens */
        @media (max-width: 600px) {
            header {
                padding: 15px 10px;
            }
            nav {
                padding: 8px 10px;
                font-size: 0.9em;
            }
            main {
                margin: 10px auto;
                padding: 0 10px;
            }
            th, td {
                padding: 8px 5px;
                font-size: 0.9em;
            }
            /* Stack secondary ads on very narrow screens */
            .ad-secondary-container a {
                width: 100%;
                flex: 0 0 100%;
                /* Reduce height on small screens further */
                height: 100px;
            }
            .ad-secondary-container img {
                height: 100%;
            }
            /* Further reduce the max height of the primary banner on small screens.
               The aspect-ratio still governs the scaling behaviour. */
            .ad-primary {
                max-height: 150px;
            }
            .ad-primary img {
                height: 100%;
            }
        }
        /* Styling for post images */
        .post-image {
            text-align: center;
            margin: 15px 0;
        }
        .post-image img {
            max-width: 100%;
            height: auto;
        }