@@ -3,11 +3,11 @@ <h1>Login</h1>
 <form action="/login" method="post">
   <p>
     <label for="username">Username or Email</label>
-    <input id="username" name="username" size="32" type="text" value="" />
+    <input id="username" name="username" size="27" type="text" value="" />
   </p>
   <p>
     <label for="password">Password</label>
-    <input id="password" name="password" size="32" type="password" value="" />
+    <input id="password" name="password" size="27" type="password" value="" />
   </p>
   {{ if .Error }}
     <div class="error">

@@ -15,7 +15,7 @@ />
   </div>
   <div>
     <label for="email">Email</label><br>
-    <input id="email" name="email" size="64" type="text" value="{{.Email}}" />
+    <input id="email" name="email" size="32" type="text" value="{{.Email}}" />
   </div>
   <div class="error">{{ range .Errors}}{{.}}<br>{{end}} </div>
   <div>

@@ -58,7 +58,7 @@ {{ end }}
 </table>
 <h3>Create file by name:</h3>
 <noscript>Create a new page by going to /edit/[filename]</noscript>
-<input id="edit_new" size=32 placeholder="e.g. newfile.gmi or folder/newfile.gmi">
+<input type="text" id="edit_new" size=32 placeholder="e.g. newfile.gmi or folder/newfile.gmi">
 <a href="#" id="create_new">Edit new file</a><br>
 <script>
   var input = document.getElementById('edit_new')

@@ -6,25 +6,25 @@ <label for="username">Username</label><br>
     <input
       id="username"
       name="username"
-      size="32"
+      size="27"
       type="text"
       value=""
     />.{{.Host}}
   </div>
   <div>
-    <label for="email">Email</label>
-    <input id="email" name="email" size="64" type="text" value="" />
+    <label for="email">Email</label> <br>
+    <input id="email" name="email" size="27" type="text" value="" />
   </div>
   <div>
-    <label for="password">Password</label>
-    <input id="password" name="password" size="55" type="password" value="" />
+    <label for="password">Password</label> <br>
+    <input id="password" name="password" size="27" type="password" value="" />
   </div>
   <div>
-    <label for="password2">Repeat Password</label>
-    <input id="password2" name="password2" size="55" type="password" value="" />
+    <label for="password2">Repeat Password</label> <br>
+    <input id="password2" name="password2" size="27" type="password" value="" />
   </div>
   <label for="reference">How did you find Flounder? Did an existing user invite you, if so, whom? Could you provide a link to your website or social media?</label>
-  <textarea id="reference" name="reference" class="textform" cols=4></textarea>
+  <textarea id="reference" name="reference" class="textform" rows=4></textarea>
   <div class="error">{{ range .Errors}}{{.}}<br>{{end}} </div>
   <div>
     <input

@@ -16,9 +16,17 @@ @media (prefers-color-scheme: dark) {
   body, main { background: #1b262c; color: white; }
   a { color: #21e6c1 }
   a:visited { color: #21e6c1 }
-  input[type="text"], textarea {
+  input[type="text"], input[type="password"], textarea {
     color: white;
     background-color: #121212;
+  }
+}
+@media only screen and (max-width: 600px) {
+  body {
+    font-size: 16px
+  }
+  input[type="text"], input[type="password"], textarea {
+    font-size: 1rem;
   }
 }
 
@@ -58,7 +66,6 @@ width: 100%;
   border: 1px solid #999999;
   margin: 5px 0;
   padding: 3px;
-  font-size: .9rem;
   resize: vertical;
 }
 
@@ -80,7 +87,9 @@ text-decoration: none;
   padding: 2px 5px;
   display: inline-block;
   margin: 0px;
+  font-size: 1rem;
 }
+
 
 .button:hover {
   background-color: black;