Added a form, added some more styling

index.html

@@ -23,7 +23,7 @@
 			.state {
 				stroke: black;
 				fill: none;
-				stroke-width: 1;
+				stroke-width: 0.5;
 			}
 			.language {
 				stroke: red;
@@ -31,16 +31,24 @@
 				hover events to be recognized on the inside. */
 				fill: black;
 				fill-opacity: 0.0;
-				stroke-width: 2;
+				stroke-width: 1;
+			}
+			.languageText {
+				visibility: hidden;
+				font-family: sans-serif;
+				font-size:1.25em;
+			}
+			.language:hover ~ .languageText {
+				visibility: visible;
 			}
 
 			.district {
 				stroke: white;
-				stroke-width: 0.5;
+				stroke-width: 0.25;
 				transition: fill 0.3s;
 			}
 			.language:hover {
-				stroke-width: 3;
+				stroke-width: 2;
 			}
 			.districtText {
 				visibility: hidden;
@@ -55,12 +63,13 @@
 		<section id="textStuff">
 		<h1>Indian Translate</h1>
 
-		<label for="toTranslate">Enter text to translate:
-			<input type="text" name="toTranslate"/>
-		</label>
+		<form class="translateForm" action="/submit" method="get">
+		<label for="query">Enter text to translate:</label>
+			<input type="text" name="query" id="query" required/>
+			<input type="submit" value="Translate"/>
 		</section>
 
-		<svg id = "indiaMap" width="700" height="700"></svg>
+		<svg id = "indiaMap" width="1000" height="1000"></svg>
 		</main>
 
 		<script src="index.js"></script>