Initial formatting of swim lanes on main landing page

public_html/css/hpr.css

@@ -23,6 +23,14 @@ https://creativecommons.org/publicdomain/
 	--link-secondary: #7fc5e2;
 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
 
+  /* screen breakpoints */
+	--for-phone-only: 599px;
+    --for-tablet-portrait-up: 600px;
+    --for-tablet-landscape-up: 900px;
+	--for-desktop-up: 1200px;
+    --for-big-desktop-up: 1800px; 
+
+
 }
 
 html {
@@ -71,6 +79,7 @@ body > header {
 	flex-flow: wrap;
 	justify-content: space-between;
 	padding: 0.25rem;
+	background-image: url("/images/main-header-background.png");
 }
 body > header > * {
 	margin: 0;
@@ -125,7 +134,8 @@ h1 {
 }
 
 h2,
-article * h1 {
+article * h1,
+section > header:first-child {
 	font-size: 1.45rem;
 	margin: 1.25rem 0 0.75rem 0;
 }
@@ -190,4 +200,29 @@ p.meta span label {
 	font-weight: bold;
 }
 
+div.lane {
+	display: flex;
+	flex-direction: row;
 
+}
+a.lane-button {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin: 0.5rem;
+	padding: 0.5rem;
+	border-width: 5px;
+	border-color: var(--link-primary);
+	border-style: solid;
+	border-radius: 5px;
+
+}
+
+@media (min-width: 900px) {
+	body { 
+		background-color: white; 
+	}
+	#qr_code > img {
+		max-height: 195px;
+	}
+}