header img

static/styles.css

 :root {
-    --yellow: rgb(255, 232, 89);
+    /* --yellow: rgb(255, 232, 89);
     --red: rgb(226, 107, 68);
     --green: rgb(137, 187, 79);
-    --blue: rgb(94, 146, 189);
+    --blue: rgb(94, 146, 189); */
 }
 
 html {
@@ -186,31 +186,38 @@ header h1 {
 header {
     position: relative;
     display: block;
+    background-image: url(/header.jpg);
+    background-size: cover;
+    background-position-y: 30%;
+    background-blend-mode: soft-light;
 }
 
 header h1 {
     margin: 0 auto 15px auto;
-    padding: 50px 0;
-    text-shadow: 0px 0px 1px rgba(0,0,0,0.12);
+    padding: 50px;
+    text-shadow: 0px 0px 1px rgba(0,0,0,0.8);
 }
 
 .yellow { 
-    background: rgb(255, 232, 89);
+    background-color: rgb(255, 232, 89);
     box-shadow: 0 0 8px 0 rgba(255, 232, 89, 0.12);
 }
-.yellow h1 { color: black; }
+.yellow h1 {
+    color: black; 
+    text-shadow: none;
+}
 .red { 
-    background: rgb(226, 107, 68);
+    background-color: rgb(226, 107, 68);
     box-shadow: 0 0 8px 0 rgba(226, 107, 68, 0.12);
 }
 .red h1 { color: white; }
 .green { 
-    background: rgb(137, 187, 79);
+    background-color: rgb(137, 187, 79);
     box-shadow: 0 0 8px 0 rgba(137, 187, 79, 0.12);
 }
 .green h1 { color: white; }
 .blue { 
-    background: rgb(94, 146, 189);
+    background-color: rgb(94, 146, 189);
     box-shadow: 0 0 8px 0 rgba(94, 146, 189, 0.12);
 }
 .blue h1 { color: white; }