Anchored footer to bottom

styles/layout.css

@@ -3,22 +3,65 @@
     --main-height: 66%;
 }
 
-html {
+
-   height: 100%;
+/*html {
+    height: auto;
+    min-height:100vh;
     width: 100%;
 }
 
 body {
-   height: 100%;
+    height:100%;
-   width: 100%;
+    min-height:100vh;
     overflow-y:auto;
 }
 
+footer{
+    width:100%;
+    padding: 2rem;
+    padding-left:0;
+    padding-right:0;
+    margin:0;
+    position:sticky;
+    bottom:0;
+    text-align: center;
+}*/
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  position: relative;
+  margin: 0;
+  padding-bottom: 5rem;
+  min-height: 100%;
+}
+
+
+footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+
 header{
-    min-height:10%;
+    /*min-height:10%;*/
+    /*height: 15vh;*/
     text-align:center;
-    padding: var(--hf-padding);
+    padding: 2rem/*var(--hf-padding)*/;
-    margin-bottom:1%;
+    margin-bottom:/*1%*/0;
 }
 
 nav{
@@ -36,18 +79,13 @@ nav{
 
 main{
     width: 80%;
-    max-width:80%;
     background-color:white;
-    min-height: var(--main-height);
+    min-height: 70vh;
     display:inline-block;
     margin:1%;
 }
 
-footer{
+
-    padding: var(--hf-padding);
-    margin-bottom:0%;
-    text-align: center;
-}
 
 .nav-tab{
     width:100%;

styles/theme.css

@@ -1,5 +1,5 @@
 :root{
-    /*--body-bg: linear-gradient(to bottom, #AEB2B8, #C7C9CB, #D7D7D8, #D7D7D8, #C7C9CB, #AEB2B8, #959BA3);*/
+    --body-bg: var(--silver)/*linear-gradient(to bottom, #AEB2B8, #C7C9CB, #D7D7D8, #D7D7D8, #C7C9CB, #AEB2B8, #959BA3)*/;
     --body-bg-color: rgba(0,0,0,0);
     --body-font: Fira;