make sticky footer / background for every page

djlearn/pages/static/css/landing.css

@@ -3,17 +3,24 @@ body {
     margin: 0;
     overflow-x: hidden;
     color: white;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 ::-webkit-scrollbar {
     display: none;
 }
 
-.landing-main {
+.landing-bg {
     background: url("/static/img/nasa_splash.jpg") no-repeat center center fixed;
     background-size: cover;
 }
 
+.landing-main-text {
+    text-align: center;
+}
+
 .landing-section {
     min-height: 100vh;
     width: 100vw;
@@ -24,8 +31,6 @@ body {
 }
 
 .landing-section-content {
-    padding: 2rem 0 2rem 0;
-    background: rgba(0,0,0,0.5);
     width: 100vw;
     display: flex;
     align-items: center;
@@ -34,6 +39,49 @@ body {
     color: #ccc;
 }
 
+.landing-section-content-inner {
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: #ccc;
+}
+
+/*
+.landing-features {
+    background: ;
+}
+
+.landing-feature {
+    
+}
+*/
+
+.shade {
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0,0,0,0.5);
+}
+
+footer {
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    position: absolute;
+    bottom: 0;
+}
+
+footer p {
+    margin: 0.5em;
+}
+
 .brand {
     margin: 0;
     color: #c55e00;
@@ -47,17 +95,14 @@ body {
 .header {
     width: 100vw;
     display: flex;
-    top: 0;
-    left: 0;
+    flex-direction: row;
     position: absolute;
-  
-    background: rgba(0,0,0,0.5);
 }
   
 .header-link {
     margin: 1rem;
     border-bottom: 3px solid #c55e00;
-    font-size: 1.2rem;
+    font-size: 1rem;
     color: #222;
     text-decoration: none;
     color: #ccc;
@@ -65,18 +110,11 @@ body {
   
 .header-text {
     margin: 1rem 1rem 1rem auto;
-    font-size: 1.2rem;
-    color: #ccc;
-}
-
-.header-text-small {
-    margin: 1rem;
-    font-size: 0.75rem;
+    font-size: 1rem;
     color: #ccc;
 }
 
 #logo {
-    padding: 3px 0 0 0;
     width: 50px;
     height: 50px;
 }