Add maximum content width

Help with readability of the website on large screens.

public_html/css/hpr.css

@@ -50,6 +50,9 @@ https://creativecommons.org/publicdomain/
 	--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
 	--shadow-secondary-color: hsl(0, 0%, 30.2%);
 	--shadow-cards: var(--shadow-secondary-color);
+
+	--content-max-width: 1080pt;
+
   /* screen breakpoints */
 	--for-phone-only: 599px;
     --for-tablet-portrait-up: 600px;
@@ -117,21 +120,26 @@ body {
 	padding: 0.25rem 0;
 }
 body > header {
-	display: flex;
-	flex-direction: row;
-	flex-flow: wrap;
-	justify-content: space-between;
 	padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem;
 	background-color: var(--banner-background-color);
-	background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png");
+	background-image: url("/images/main-header-background.png");
-	background-size: 59%, cover;
+	background-size: cover;
-	background-repeat: no-repeat, no-repeat;
+	background-repeat: no-repeat;
-	background-position: right -15px top -20px, left top;
+	background-position: left top;
 	color: var(--banner-text-primary);
 	align-items: center;
 	border-top: var(--background-secondary) solid 1rem;
 }
-body > header > * {
+body > header .bounding-box {
+	background: none;
+	display: flex;
+	flex-direction: row;
+	flex-flow: wrap;
+	justify-content: space-between;
+	max-width: var(--content-max-width);
+	margin: 0 auto;
+}
+body > header .bounding-box > * {
 	margin: 0;
 	padding: 0;
 	flex: 1 1 auto;
@@ -141,6 +149,9 @@ body > header > * {
 body > main {
 	flex: 1 0 auto;
 	padding: 0.25rem;
+	max-width: var(--content-max-width);
+	margin-left: auto;
+	margin-right: auto;
 }
 body > footer {
 	flex: 0 1 auto;
@@ -151,6 +162,10 @@ body > footer {
 	text-align: center;
 	line-height: 1.25;
 }
+body > footer #copyright {
+	max-width: var(--content-max-width);
+	margin: 0 auto;
+}
 body > footer a {
 	color: var(--link-secondary);
 }
@@ -372,6 +387,14 @@ a.lane-button img {
 #title * {
 	margin: 0;
 	padding: 0;
+	flex: 1 1 auto;
+	background: none;
+}
+#title {
+	background-image:  url("/images/hpr-splatter-logo.svg");
+	background-repeat: no-repeat;
+	background-size: 15rem;
+	background-position: left 8.5em top -2em;
 }
 #title a {
 	color: var(--link-title-color);
@@ -384,6 +407,7 @@ a.lane-button img {
 	letter-spacing: -0.65rem;
 	line-height: 0.75;
 	margin-bottom: 0.25rem;
+	color: transparent;
 }
 #title #site_acronym a {
 	text-decoration: none;
@@ -529,11 +553,13 @@ fieldset > table td input[type="radio"] {
 	border: 0;
 }
 @media (min-width: 600px) {
-	body > header {
+	body > header .bounding-box {
-		background-size: 200pt, cover;
-		background-position: left 128pt top -12pt, left top;
 		justify-content: space-between;
 	}
+	#title {
+	/*	background-size: 40%;
+		background-position: left 8.5em top -2em; */
+	}
 	#tag_line {
 		line-height: 1;
 	}

templates/page.tpl.html

@@ -37,6 +37,7 @@
 	<hr class="no-css">
 </div>
 <header role="banner">
+<div class="bounding-box">
   <hgroup id="title">
 	  <h1 id="site_acronym"><a href="<!--% absolute_path(baseurl) %-->index.html">HPR</a></h1>
       <p id="site_name">
@@ -50,6 +51,7 @@
 	<p id="tag2">Sharing your ideas, projects, opinions since 2005</p>
     <p id="tag3">New episodes every weekday </p>
   </hgroup>
+</div>
 </header>
 <main id="main_content" role="main">
 <!--% INCLUDE $content %-->