fix display on small screen

static/base.css

@@ -1,5 +1,6 @@
 @import url("typography.css");
 
+
 /* Reset */
 * {
     margin: 0;
@@ -21,11 +22,13 @@ body {
 
 /* Main Container */
 #wrap {
-    width: 70%;
-    max-width: 45em;
     margin: 0 auto;
     background-color: #fff;
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 70%;
+    max-width: 45em;
 }
 
 /* Header Styles */
@@ -45,27 +48,45 @@ header h1 {
 
 /* Navigation Bar */
 #navbar {
-    min-width: 100%;
+    width: 100%;
     background-color: #03396C;
     padding: 5px 3em 5px 0;
     text-align: right;
-    width: 70%;
-    max-width: 45em;
-    margin: 0 auto;
 }
 
 /* Main Content */
 #main {
     padding: 35px;
+    flex: 1;
 }
 
 /* Footer */
 #footer {
-    padding-bottom: 0.5em;
+    margin-top: auto;
 }
-
 #footer-title {
-    min-width: 100%;
+    width: 100%;
     background-color: #03396C;
     text-align: center;
+    padding: 0.5em 0;
+}
+@media (max-width: 768px) {
+    html, body {
+        min-height: 100vh;
+    }
+    #wrap {
+        width: 100%;
+        max-width: none;
+    }
+    footer p{
+        margin-bottom: 0.25em;
+    }
+
+    header h1 {
+        font-size: clamp(2rem, 20vw, 100px);
+        text-align: center;
+        max-width: 90%;
+        word-wrap: break-word;
+        margin: 20px auto;
+    }
 }

static/typography.css

@@ -72,7 +72,6 @@ a {
 /* Footer */
 #footer-title {
     padding: 5px 0;
-    margin-bottom: 0.5em;
     min-width: 100%;
     color: #ffffff;
     font-family: "Montserrat", sans-serif;