Fixed mobile layout

app.py

@@ -58,7 +58,7 @@ HTML_FORM = '''
     box-shadow: 0 0 12px 0 #000a;
     padding: 2em 2em 1.5em 2em;
     color: #b6c8e0;
-    font-size: 1.08em;
+    font-size: 1.08rem;
     font-family: inherit;
     box-sizing: border-box;
     width: 100%;
@@ -67,7 +67,7 @@ HTML_FORM = '''
   .markdown-ref h4 {
     margin: 0 0 0.4em 0;
     color: #88e0ff;
-    font-size: 1.12em;
+    font-size: 1.12rem;
     font-weight: 700;
     letter-spacing: 0.01em;
   }
@@ -83,7 +83,7 @@ HTML_FORM = '''
     border-radius: 0.5em;
     padding: 0.12em 0.46em;
     color: #aef6cb;
-    font-size: 0.98em;
+    font-size: 0.98rem;
     margin-left: 0.18em;
   }
   textarea {
@@ -94,7 +94,7 @@ HTML_FORM = '''
     border: 1.5px solid #444;
     background: #181c1f;
     color: #eee;
-    font-size: 1.06em;
+    font-size: 1.06rem;
     margin-bottom: 1.5em;
     resize: vertical;
     font-family: 'DejaVu Sans Mono', 'Fira Mono', 'monospace';
@@ -111,7 +111,7 @@ HTML_FORM = '''
     background: linear-gradient(90deg, #8ee3c1, #35a7ff);
     color: #222;
     font-weight: bold;
-    font-size: 1.12em;
+    font-size: 1.12rem;
     border: none;
     border-radius: 0.7em;
     padding: 0.5em 1.6em;
@@ -150,7 +150,7 @@ HTML_FORM = '''
   }
   .status-msg {
     margin: 0.6em 0 0.1em 0;
-    font-size: 1.12em;
+    font-size: 1.12rem;
     border-radius: 0.7em;
     background: #294b3a;
     color: #9fffc6;
@@ -167,7 +167,14 @@ HTML_FORM = '''
     box-shadow: 0 0 8px #22000690;
   }
 
-  @media (max-width: 1000px) {
+  @media (max-width: 1000px) {  
+      body {
+        font-size: 1.28em !important;  /* Big bump */
+      }
+      h2, h3, h4 {
+        font-size: 2em !important;
+      }
+
     .centered-flex {
       flex-direction: column;
       align-items: center;
@@ -178,11 +185,26 @@ HTML_FORM = '''
     .form-card,
     .preview-card,
     .markdown-ref {
+      font-size: 1.18em !important;
       min-width: auto;
       max-width: 90vw;
       width: 100%;
       margin: 0.8em 0;
     }
+    
+    textarea {
+      font-size: 1.16em !important;
+      padding: 1em;
+      min-height: 12em;
+    }
+    .status-msg {
+      font-size: 1.25em !important;
+      padding: 0.8em 1.6em;
+    }
+    button[type=submit] {
+      font-size: 1.3em !important;
+      padding: 0.9em 2.2em;
+    }
   }
 
   .print-frame {
@@ -222,6 +244,7 @@ HTML_FORM = '''
     position: relative;
     z-index: 2;
   }
+
 </style>
 <div class="centered-flex">
   <div class="form-card">