Optimize for small screens

index.css

@@ -43,15 +43,17 @@ body.wide {
 }
 
 .cell {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
 	padding: 0.5em;
-	display: inline-block;
 	width: 1em;
 	height: 1em;
 	font-family: monospace;
 	font-size: xx-large;
 	border: 1px solid #bbb;
 	vertical-align: top;
-	text-align: center;
 }
 
 #keyboard {
@@ -94,3 +96,27 @@ body.wide {
 	background-color: #1f2937;
 	color: #fff; 
 }
+
+@media (max-width: 600px) {
+	#main {
+		gap: 10px;
+	}
+	.cell {
+		box-sizing: border-box;
+		padding: 0.5em;
+
+		width: 9vw;
+		height: 9vw;
+	}
+	.key {
+		box-sizing: border-box;
+		width: 7.6vw;
+		height: 7.6vw;
+		font-size: x-large;
+	}
+
+	#backspace, #enter {
+		width: 15.2vw;
+		height: 7.6vw;
+	}
+}