adjust syling for large screens

src/App.css

@@ -3,6 +3,7 @@ html {
 }
 
 body {
+  /* --cell-size is set during the game */
   --capped-cell-size: min(var(--cell-size), 0.8cm);
   --font-size: min(calc(var(--capped-cell-size) * 0.8), 0.5cm);
   --dark-color: rgb(55 54 71);
@@ -164,13 +165,18 @@ button {
   transform: rotate(180deg);
   min-height: 10vmin;
   overflow: scroll;
+  display: flex;
+  align-items: center;
 }
 
 .rowLabel > div {
   box-shadow: 1px -1px var(--light-color);
   padding-right: 4px;
   min-width: 10vmin;
   overflow: scroll;
+  display: flex;
+  align-items: center;
+  justify-content: right;
 }
 
 .columnLabel.size3 > div {
@@ -420,20 +426,23 @@ input[type="checkbox" i]:checked {
   color: rgb(0 162 255);
 }
 
-/* larger screens */
-@media (width >= 768px) {
+/* Large screen */
+@media (width >= 600px) {
   body {
-    --capped-cell-size: 3vmin;
+    --capped-cell-size: min(calc(var(--cell-size) * 0.8), 0.5cm);
+    --font-size: min(calc(var(--capped-cell-size) * 0.7), 0.5cm);
+  }
+
+  #controls {
+    width: 100%;
   }
-}
 
-/* wider screens */
-@media (orientation: landscape) {
-  #app {
-    grid-template: ". controls" auto "matrix result" auto "matrix clues" 1fr / auto 1fr;
+  #controls > button {
+    width: var(--capped-cell-size);
+    height: var(--capped-cell-size);
   }
 
-  .matrix {
-    align-self: self-start;
+  .clues {
+    max-width: calc(var(--capped-cell-size) * 20);
   }
 }