Apply a crafty look to lane buttons

public_html/css/hpr.css

@@ -25,6 +25,13 @@ https://creativecommons.org/publicdomain/
     local("BebasNeue"),
     url("/css/bebas/BebasNeue.woff") format("woff");
 }
+@font-face {
+  font-family: "PatrickHand";
+  src:
+    local("PatrickHand"),
+    url("/css/PatrickHand/PatrickHand-Regular.ttf") format("ttf");
+}
+
 :root {
 	--background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
 	--text-primary: #4d4d4d; /* HPR Grey */
@@ -306,7 +313,18 @@ a.lane-button {
 	border-style: solid;
 	border-radius: 5px;
 	text-align: center;
-
+	background-image: url("../images/lane-item-background.png");
+}
+a.lane-button p {
+	font-family: 'Patrick Hand', cursive;
+	font-weight: bold;
+	font-size: 1.2em;
+	mask-image: url("../images/charcoal.png");		
+	mask-size: 20%;
+	mask-repeat: repeat;
+	background-clip: text;
+	color: black;
+	margin: -0.25rem;
 }
 a.lane-button:hover {
 	box-shadow: 
@@ -315,8 +333,11 @@ a.lane-button:hover {
 }
 a.lane-button img {
 	height: clamp(95px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
-	filter: invert(60%) sepia(50%) hue-rotate(140deg) saturate(200%);
+	/*filter: invert(60%) sepia(50%) hue-rotate(140deg) saturate(200%);*/
 	transform: scaleX(0.9);
+	mask-image: url("../images/charcoal.png");		
+	mask-size: 60%;
+	mask-repeat: repeat;
 }
 #tag_line,
 #title {