Styling changes mostly done

index.html

@@ -27,7 +27,6 @@
 				visibility: hidden;
 				opacity: 0;
 				transition: opacity 1s, visibility 2s;
-            border: 2px solid;
 			}
 
 			svg.show {
@@ -58,7 +57,7 @@
 			.translationText, .romanizationText {
 				visibility: hidden;
 				font-family: "Noto Sans";
-				font-size:1.25em;
+				font-size:1.2em;
 			}
 
          .romanizationText {
@@ -68,7 +67,7 @@
          .languageText {
             pointer-events: none;
             font-weight: bold;
-            font-size: 1.15em;
+            font-size: 1em;
             font-family: sans-serif;
             visibility: hidden;
          }
@@ -181,9 +180,19 @@
 			}
 			@media only screen and (max-width: 768px) {
 					main {
-							flex-direction: column;
+						flex-direction: column;
-                     align-items: stretch;
+                    	align-items: stretch;
 					}
+					.district {
+							stroke-width: 0.1;
+					}
+					.translationText, .romanizationText {
+						font-size: 0.7em;
+					}
+					.languageText {
+						font-size: 0.6em;
+					}
+
 			}
 
 		</style>

index.js

@@ -215,7 +215,7 @@ function stateOrDistrictOrLanguage(d) {
 //	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
 const mapWidth = /*window.innerWidth - */document.querySelector("#svgContainer").offsetWidth * 0.85;
 // const mapHeight = document.querySelector("#svgContainer").offsetHeight;
-const mapHeight = (window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top) * 0.92;
+const mapHeight = (window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top);
 
 const svg = d3.select("#svgContainer")
 			.append('svg')