Add and format lane icons

public_html/css/hpr.css

@@ -30,6 +30,9 @@ https://creativecommons.org/publicdomain/
 	--link-primary-hover: #f8961e;
 	--link-secondary: #a8f8ff;
 	--link-secondary-hover: #f9e9c2;
+
+	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
+
 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
 
   /* screen breakpoints */
@@ -84,7 +87,8 @@ body > nav ul li {
 	line-height: 1.5;
 	margin: 0;
 	padding: 0;
-	padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
+	padding-right: var(--link-spacing-horizontal);
+}
 }
 body > header {
 	display: flex;
@@ -228,15 +232,20 @@ a.lane-button {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	margin: 0.5rem;
+	margin: 0.5rem var(--link-spacing-horizontal);
 	padding: 0.5rem;
 	border-width: 5px;
 	border-color: var(--link-primary);
 	border-style: solid;
 	border-radius: 5px;
+	text-align: center;
 
 }
-
+a.lane-button img {
+	height: 110px;
+	filter: invert(60%) sepia(50%) hue-rotate(140deg) saturate(200%);
+	transform: scaleX(0.9);
+}
 #tag_line,
 #title {
 	text-transform: uppercase;