full screen works better

server/styles/index.css

@@ -60,7 +60,6 @@ input, button
 
 #divTwcMiddle
 {
-    /* display: flex; */
 }
 
 #divTwcLeft
@@ -97,7 +96,7 @@ input, button
 
 #divTwcBottom
 {
-    visibility: hidden;
+    /* visibility: hidden; */
     display: flex;
     flex-direction: row;
     background-color: #000000;
@@ -217,7 +216,7 @@ input, button
     font-family: "Star4000";
     margin: 0 0 0 0;
     /* overflow: hidden; */
-    /* width: 100%; */
+    width: 100%;
     /* height: 480px; */
     /* max-width: 640px; */
 }
@@ -257,15 +256,15 @@ jsgif
 }
 
 #container {
-	/* position: absolute; */
+	position: relative;
 	width: 100%;
-	/* max-width: 640px; */
+	max-width: 640px;
 }
 
 #container canvas {
 	/* position: absolute; */
 	width: 100%;
-	max-width: 640px;
+	/* max-width: 640px; */
 }
 .heading {
 	font-weight: bold;
@@ -278,6 +277,41 @@ jsgif
 	display: block;
 	max-width: 300px;
 }
-#divTwcNav img {
-	zoom: 200%;
+#divTwcBottom img {
+	zoom: 150%;
+}
+#divTwc:fullscreen {
+	display:flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#divTwc:fullscreen #display {
+
+	position: relative;
+}
+#divTwc:fullscreen #divTwcBottom {
+    display: flex;
+    flex-direction: row;
+    background-color: rgb(0 0 0 / 0.5);
+    color: #ffffff;
+    width: 100%;
+    position: absolute;
+    bottom: 0px;
+}
+
+@media screen and (orientation: portrait) {
+	#divTwc:fullscreen canvas {
+		width: 100vw;
+		max-width: 100vw;
+		height: auto;
+	}
+}
+
+@media screen and (orientation: landscape) {
+	#divTwc:fullscreen canvas {
+		height: 100vh;
+		max-height: 100vh;
+		width: auto;
+	}
 }