.banner {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), 
              url('./images/banner.png') center / cover no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 200px; /* Adjust height as needed */
    position: relative;
    color: #ffffff;
}

body {
	margin: 40px auto;
	max-width: 650px;
	line-height: 1.6;
	font-size: 18px;
	color: #444;
	padding: 0 10px;
}
h1,
h2,
h3 {
	line-height: 1.2;
}

p {
	text-align: justify;
	hyphens: auto;
}

img {
	max-width: 100%;
}

header {
	max-width: 40rem;
	margin: 2rem auto;
	padding: 0 1rem;
	/*font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;*/
}

nav {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

nav a {
	text-decoration: none;
	color: #000;
	font-size: 1rem;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
	position: relative;
}

/* Vertical separator */
nav a:not(:last-child)::after {
	content: "|";
	position: absolute;
	right: -0.85rem;
	color: #999;
}

/* Hover/focus effect: subtle but obvious */
nav a:hover,
nav a:focus {
	border-bottom-color: #000;
}

/* Optional: indicate current page */
nav a[aria-current="page"] {
	border-bottom-color: #000;
	font-weight: 600;
}