Updated styling for buttons and textbox; made some flexbox changes

index.html

@@ -115,7 +115,8 @@
 
          section#textStuff {
             min-width: 30em;
-            flex: 0 1 0;
+/*            flex: 0 1 0; */
+	    flex: 0 0 auto;
          }
 
 	 section#textStuff ul {
@@ -128,6 +129,62 @@
 		 margin: 1em 0;
 	 }
 
+	 #query {
+		 font-size: 1em;
+		 padding: 6px 8px;
+		 margin-right: 1em;
+	 }
+
+	 #submitButton {
+		 appearance: none;
+		 background-color: #2ea44f;
+		 border: 1px solid rgba(27, 31, 35, .15);
+		 border-radius: 6px;
+		 box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
+		 box-sizing: border-box;
+		 color: #fff;
+		 cursor: pointer;
+		 display: inline-block;
+		 font-size: 1em;
+		 font-weight: 600;
+		 line-height: 1.2em;
+		 padding: 6px 16px;
+		 position: relative;
+		 text-align: center;
+		 text-decoration: none;
+		 user-select: none;
+		 -webkit-user-select: none;
+		 touch-action: manipulation;
+		 vertical-align: middle;
+		 white-space: nowrap;
+	 }
+
+#submitButton:focus:not(:focus-visible):not(.focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
+#submitButton:hover {
+  background-color: #2c974b;
+}
+
+#submitButton:focus {
+  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
+  outline: none;
+}
+
+#submitButton:disabled {
+  background-color: #94d3a2;
+  border-color: rgba(27, 31, 35, .1);
+  color: rgba(255, 255, 255, .8);
+  cursor: default;
+}
+
+#submitButton:active {
+  background-color: #298e46;
+  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
+}
+
 			/* Position map load spinner in the middle of the SVG */
 			#svgContainer {
 					position: relative;
@@ -228,7 +285,7 @@
 			<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::before-request="hideTranslationsAndShowText(event.detail.xhr.response)" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
 				<label for="query">Enter text to translate:</label>
 				<input type="text" name="query" id="query" required/>
-				<input type="submit" value="Translate"/>
+				<input type="submit" id="submitButton" value="Translate"/>
 			</form>
 		<progress id="loading-screen" class="loading-indicator"></progress>
 		<h3 id="fetchingText">Fetching translations...</h3>