@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');

body > * {
	box-sizing: border-box;
	max-width: 1200px;
	Aborder:1px dashed lightgray;
	margin: 0 auto;
	padding: 0;
	--font-family: 'Inter', sans-serif;
	--color-text: #6B7280;
	--color-accent:black;
}

#d-banner {
	width:100%;
	min-height:20px;
	aspect-ratio: 16 / 5;
	background-image: url(bw_lake.jpg);
	background-size: cover;
	background-position:center;
	background-color: var(--color-text);
	Afilter: grayscale();
}

/* Make header a flex container */
header {
	display: flex;
	justify-content: space-between; /* left content stays left, nav moves right */
	align-items: flex-start;        /* top-align all children */
	padding: 1rem;                  /* optional spacing */
	height: 80px;                   /* example height */
	box-sizing: border-box;
}


/* Arrange the ul items horizontally with no bullets */
header > nav > ul {
	display: flex;      /* horizontal layout */
	list-style: none;   /* remove bullets */
	margin: 0;          /* remove default margin */
	padding: 0;         /* remove default padding */
	gap: 1.5rem;        /* spacing between links */
}
header > nav a {
	font-weight: bold;
}
header > nav a:hover, header > nav a[aria-current="page"] {
	background-color: var(--color-bg);
	color: var(--color-accent);
	text-decoration: none;
}
button:hover, .btn:hover {
	background: var(--color-accent);
	color: var(--color-muted);
}

#d-content {
	display: flex;
}
#d-content > * {
	padding: 1rem;
	box-sizing: border-box;
	min-width: 0; /* prevent overflow */
}
#d-content main {
	flex: 1;
}
#d-content > aside {
	flex: 0 0 250px;   /* fixed sidebar width */
}

.mobile	{
	display:none;
}

@media (max-width: 600px) {
	header > nav {
		background-color: var(--color-bg);
		border:1px solid var(--color-text);
		flex-direction: column;    /* stack children vertically */
		align-items: center;       /* center-align all children */
		height: auto;              /* allow height to adjust */
		text-align: center;        /* center text inside children */
	}
	header > nav > ul {
		flex-direction: column;    /* stack links vertically */
		gap: 0.5rem;               /* reduce spacing between links */
	}
	.mobile	{
		display:block;
	}
	.desktop {
		display:none;
	}
	header > nav {
		display: none;
	}
	#nav-toggle:checked + nav {
		display: block;
	}
}