<style>
        /* Base styles for all devices */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        header, nav, main, footer {
            padding: 15px;
        }

        header {
            background: #007BFF;
            color: white;
            text-align: center;
        }

        nav {
            background: #f4f4f4;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        nav a {
            text-decoration: none;
            color: #333;
            padding: 8px 12px;
        }

        nav a:hover {
            background: #ddd;
            border-radius: 4px;
        }

        main {
            padding: 20px;
        }

        footer {
            background: #333;
            color: white;
            text-align: center;
        }

        /* Responsive images */
        img {
            max-width: 100%;
            height: auto;
        }

        /* Mobile-first: stack navigation vertically on small screens */
        @media (max-width: 600px) {
            nav {
                flex-direction: column;
                align-items: center;
            }
            nav a {
                display: block;
                width: 100%;
                text-align: center;
            }
        }

        /* Tablet view adjustments */
        @media (min-width: 601px) and (max-width: 900px) {
            nav {
                justify-content: space-evenly;
            }
        }

        /* Desktop view adjustments */
        @media (min-width: 901px) {
            main {
                max-width: 900px;
                margin: auto;
            }
        }
/style>