body {
	background: #d8b9ff;
	/* bright faint yellow for body text per request */
	color: #fff8b0;
	/* Force Comic Sans for the page; fallbacks provided */
	font-family: 'Comic Sans MS', 'Comic Sans', 'Trebuchet MS', Arial, sans-serif;
	margin: 0;
	padding: 0;
}

#page {
	max-width: 1100px;
	margin: 12px auto;
	padding: 8px;
}

#grid {
	display: grid;
	grid-template-columns: 220px 1fr 300px;
	grid-gap: 12px;
	align-items: start;
}


.nav-box {
	background: #cfa8ff;
	border: 6px solid #7f4db3;
	padding: 10px;
	height: calc(100% - 20px);
	box-sizing: border-box;
}
.nav-title {
	/* inherit Comic Sans from body */
	color: #ffffff;
	margin: 0 0 8px 0;
	font-size: 28px;
	letter-spacing: 2px;
}
.nav-list { list-style: none; padding: 0; margin: 0; }
.nav-list li { margin: 10px 0; }
.nav-list a {
	display: block;
	padding: 18px 10px;
	background: rgba(255,255,255,0.06);
	color: #ffffff; 
	text-decoration: underline; 
	border: 2px solid rgba(0,0,0,0.12);
	font-weight: bold;
}
.nav-list a:visited { color: #ffffff; }

.nav-list a:hover,
.nav-list a:focus {
	background: #7f4db3;
	color: #ffffff;
	outline: none;
}

.title-box {
	grid-column: 2 / 3;
	text-align: center;
	background: #bfa1f7;
	border: 6px solid #7f4db3;
	padding: 16px;
	font-size: 44px;
	color: #ffffff;
	margin-bottom: 12px;
}

#content { padding: 6px 20px; }
.lead { color: #fff8b0; font-size: 18px; margin: 12px 0; }
.center-image { text-align: center; margin: 18px 0; }
.center-image img { max-width: 320px; border: 6px solid #7f4db3; background: #fff; }

.home-gallery { display: flex; justify-content: center; gap: 12px; margin: 18px 0; }
.home-gallery img { width: 180px; height: auto; border: 6px solid #7f4db3; background: #fff; display: block; }

.side-image { background: #d9bdf9; border: 6px solid #7f4db3; padding: 6px; box-sizing: border-box; margin-bottom: 12px; }
.side-image.big img { width: 100%; height: auto; display: block; }
.side-image.small img { width: 100%; height: auto; display: block; }

#footer { grid-column: 1 / -1; text-align: center; color: #fff; margin-top: 10px; }

.page-bottom { text-align: center; margin-top: 12px; }
.page-bottom img { width: 220px; height: auto; border: 6px solid #7f4db3; background: #fff; display: inline-block; }

a { color: #ffffff; text-decoration: underline; }
a:visited { color: #ffffff; text-decoration: underline; }

@media screen and (max-width: 900px) {
	#grid { grid-template-columns: 1fr; }
	.title-box { grid-column: 1 / -1; }
	#footer { grid-column: 1 / -1; }
}

body.page-about {
	background: #ffd6cf;
	color: #2b1a17;
}
.page-about .nav-box { background: #ffc8b8; border-color: #d96b5a; }
.page-about .title-box { background: #ffc1c7; border-color: #d96b5a; color: #2b1a17; }
.page-about .nav-title { color: #2b1a17; }
.page-about .center-image img, .page-about .center-image img { border-color: #d96b5a; }
.page-about .side-image { background: #ffd8cf; border-color: #d96b5a; }
.page-about .nav-list a { color: #2b1a17; }
.page-about .lead, .page-about { color: #2b1a17; }
.page-about .nav-list a:hover, .page-about .nav-list a:focus { background: #d96b5a; }

body.page-writing {
	background: #fff8c6;
	color: #3b2f00;
}
.page-writing .nav-box { background: #fff3a8; border-color: #e6d44a; }
.page-writing .title-box { background: #fff1b8; border-color: #e6d44a; color: #3b2f00; }
.page-writing .nav-title { color: #3b2f00; }
.page-writing .center-image img { border-color: #e6d44a; }
.page-writing .side-image { background: #fff6c8; border-color: #e6d44a; }
.page-writing .nav-list a { color: #3b2f00; }
.page-writing .lead, .page-writing { color: #3b2f00; }
.page-writing .nav-list a:hover, .page-writing .nav-list a:focus { background: #e6d44a; }

body.page-art {
	background: #cfe0ff;
	color: #ffffff;
}
.page-art .nav-box { background: #b5d0ff; border-color: #3d61b0; }
.page-art .title-box { background: #9fc0ff; border-color: #3d61b0; color: #16335a; }
.page-art .nav-title { color: #16335a; }
.page-art .center-image img { border-color: #3d61b0; }
.page-art .side-image { background: #d6e8ff; border-color: #3d61b0; }
.page-art .nav-list a { color: #16335a; }
.page-art .lead, .page-art { color: #16335a; }
.page-art .nav-list a:hover, .page-art .nav-list a:focus { background: #3d61b0; }

body.page-films {
	background: #ffe6cc;
	color: #3b2b1a;
}
.page-films .nav-box { background: #ffd4a8; border-color: #e08b3c; }
.page-films .title-box { background: #ffd0a8; border-color: #e08b3c; color: #4a2f14; }
.page-films .nav-title { color: #4a2f14; }
.page-films .center-image img { border-color: #e08b3c; }
.page-films .side-image { background: #ffe9d6; border-color: #e08b3c; }
.page-films .nav-list a { color: #4a2f14; }
.page-films .lead, .page-films { color: #4a2f14; }
.page-films .nav-list a:hover, .page-films .nav-list a:focus { background: #e08b3c; }

body.page-xmas {
	background: #e6ffd6;
	color: #1e3b00;
}
.page-xmas .nav-box { background: #d4f7a8; border-color: #005412; }
.page-xmas .title-box { background: #d8fcae; border-color: #005412; color: #1e3b00; }
.page-xmas .nav-title { color: #1e3b00; }
.page-xmas .center-image img { border-color: #005412; }
.page-xmas .side-image { background: #eaffcf; border-color: #005412; }
.page-xmas .nav-list a { color: #1e3b00; }
.page-xmas .lead, .page-xmas { color: #1e3b00; }
.page-xmas .nav-list a:hover, .page-xmas .nav-list a:focus { background: #005412; }