Add parallax effect to background

static/css/background.css

@@ -1,16 +1,13 @@
-@keyframes animatedBackground {
-    from { background-position: 0 0; }
-    to { background-position: 0 100%; }
-}
-@keyframes rotateBackground {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
-
-body {
+.background {
     background-image: url("/img/webb-dark.png");
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
 
     background-position: center;
-    background-repeat: cover;
-    background-attachment: fixed;
+    background-repeat: repeat;
+    background-attachment: auto;
 }
+
+

static/css/footer.css

@@ -6,10 +6,7 @@ footer {
   padding: 15px;
   text-align: center;
   padding-top: 3vh;
-}
-
-.footer-fade {
-    background: linear-gradient(rgba(11,11,12,0.2) 0%, rgba(11,11,12,1) 35%);
+  z-index: 100;
 }
 
 .footer-sections {
@@ -46,6 +43,7 @@ footer {
 
 .footer-header {
     margin-top: 5px;
+    max-width: 100%;
 
 }
 
@@ -53,3 +51,9 @@ small {
     font-size: 0.8em;
     color: rgba(255,255,255,0.5);
 }
+
+@media only screen and (max-width: 768px) {
+    .footer-sections {
+        grid-template-columns: 1fr;
+    }
+}

static/css/styles.css

@@ -14,6 +14,7 @@ body {
     margin: 0;
     height: 100%;
     padding-bottom: 0px;
+    background-color: rgba(11,11,12,1);
 }
 
 h1, h2, h3, h4 {
@@ -48,11 +49,6 @@ html {
     max-width: 100%;
     height: 100vh;
 
-    display: grid;
-    align-content: center;
-    justify-content: center;
-    justify-items: center;
-    align-items: center;
 }
 
 .top-fade {
@@ -69,8 +65,12 @@ html {
 
 .intro-content {
     text-align: center;
-}
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
+}
 
 .page-header {
     text-align: center;
@@ -119,8 +119,13 @@ article a {
     padding: 50px;
     height: 30vh;
     padding-bottom: 25px;
-    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%);
     overflow: hidden;
+    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%);
+}
+
+article a:hover {
+    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(32,42,68,0.5) 100%);
+    transition: 300ms linear;
 }
 
 .post {