/* Reset default spacing */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
			font-family: Arial, sans-serif;
			line-height: 1.6;
			color: #333;
			min-height: 100vh;       /* body is at least as tall as the window */
			display: flex;
			flex-direction: column;  /* stacks header, main, footer vertically */
			background-color: #fff8e7;
		}

        /* Header / navigation bar */
        header {
			background-color: #003153;
			color: #fff8e7;
			padding: 15px 30px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.logo {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.logo img {
			width: 45px;
			height: 45px;
			border-radius: 50%; /* makes the picture round, remove if you want a square */
		}

		nav a {
			color: #fff8e7;
			text-decoration: none;
			margin-left: 20px;
		}

		nav a:hover {
			text-decoration: underline;
		}

        /* Main content area */
        main {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
			width: 100%;
			flex: 1;   /* main stretches to fill the leftover space */
		}

        section {
            margin-bottom: 40px;
        }
        
        h2 {
            color: #003153;
            margin-bottom: 10px;
        }

        /* Footer */
        footer {
            background-color: #003153;
            color: #fff8e7;
            text-align: center;
            padding: 15px;
        }