Updated flexbox styling

index.html

@@ -110,10 +110,16 @@
 				 transition: fill-opacity 0.3s;
 			}
 
+         section#textStuff {
+            min-width: 30em;
+            flex: 0 1 0;
+         }
+
 			/* Position map load spinner in the middle of the SVG */
 			#svgContainer {
 					position: relative;
 					display: inline-block;
+               flex-shrink: 1;
                flex-grow: 1;
                max-width: 100%;
 			}
@@ -175,7 +181,7 @@
 			#fetchingText {
 				visibility: hidden;
 			}
-			@media only screen and (max-width: 768px) {
+			@media only screen and (max-width: 1366px) {
 					main {
 						flex-direction: column;
                     	align-items: stretch;
@@ -212,7 +218,7 @@
 			<ul>
 					<li>Enter text in English. Translations are displayed on the map, along with romanizations (translation converted to Latin script).
 					<li>Hover over a language region (denoted by color) to see the language spoken in the region. Language boundaries were drawn using census data; they may be inaccurate.
-					<li>Translations are made with Google Translate - they may be innacurate.
+					<li>Translations are retrieved from Google Translate - they may be innacurate.
 					<li>Romanizations are made with the <kbd>ai4bharat-transliteration</kbd> AI model, developed by <a href="https://ai4bharat.iitm.ac.in/">Ai4Bharat</a>.