Add sticky header image

style/new_style.css

@@ -3,31 +3,36 @@ html {
 }
 
 body {
-
+    height: 100%;
+    width: 100%;
+    margin: auto;
 }
 
 .header-image-home {
     background-color: rgb(29,49,49);
-    background-image: url("https://via.placeholder.com/375x335.webp");
+    background-image: url("https://via.placeholder.com/1200x400.webp");
     background-repeat: no-repeat;
     background-position: center;
-    min-height: 40%;
-    max-height: 45%;
-    width: 100%;
-    position: fixed; /* Try setting this to relative and .page-title to absolute */
-    top: 40px;
-    left: 0;
+    height: 275px;
+    min-width: 100%;
+    max-width: 100%;
+    margin: auto;
+    position: sticky;
+    top: -190px;
 }
 
 .page-title { /* This needs to be bottom center of header-image-home/header-image */
     font-family: sans-serif;
     font-size: 4vw;
     text-align: center;
-    position: absloute;
+    position: absolute;
+    bottom: -10px;
     box-shadow: 3px;
     color: azure;
 }
 
 .content {
-    margin-top: 95%;
+    margin: auto;
+    margin-top: 10px;
+    width: 90%;
 }