CSS

public/css/style.css

@@ -4,6 +4,8 @@ html, body {
     min-height: 100vh;
     background-color: #4b0600;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
     overflow-x: hidden;
 }
 
@@ -15,6 +17,7 @@ html, body {
     background-color: #0c0;
     height: 3vh;
     min-height: 24px;
+    flex-shrink: 0;
 }
 
 .header {
@@ -23,6 +26,7 @@ html, body {
     margin: 0;
     display: flex;
     flex-wrap: wrap;
+    flex-shrink: 0;
 }
 
 .header-main {
@@ -82,7 +86,7 @@ html, body {
     display: flex;
     flex-direction: row;
     margin: 0;
-    min-height: 77vh;
+    flex-grow: 1;
     width: 100%;
 }
 
@@ -120,7 +124,7 @@ html, body {
     background-color: #bbb;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
     .header {
         flex-direction: column;
         height: auto;
@@ -202,7 +206,9 @@ nav {
 }
 
 .footer {
-    bottom: 0;
     width: 100%;
-    position: fixed;
+    background-color: #999;
+    padding: 10px;
+    text-align: center;
+    flex-shrink: 0;
 }