feature: make it more usable on mobile by default

public/style.css

@@ -1,3 +1,7 @@
+:root {
+  font-size: 2.0rem;
+}
+
 body {
   margin: 0;
 }
@@ -15,11 +19,10 @@ h1 {
   display:flex;
   align-items: center;
   justify-content: center;
+  flex-flow: column;
 }
 
 #top a {
-  position: fixed;
-  right: 2em;
   font-size: .8em;
 }
 
@@ -30,13 +33,37 @@ h1 {
 #content {
   display: grid;
   grid-template-areas:
-    "query query query query"
+    "query"
-    "input input output output";
+    "input"
+    "output";
   gap: 1em;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto 1fr 1fr;
 
   padding: 1em;
-  height: 80vh;
+  height: 90vh;
+}
+
+@media only screen and (min-width: 1000px) {
+  /* For Desktops */
+  :root {
+    font-size: 1.2rem;
+  }
+
+  #content {
+    grid-template-areas:
+      "query query query query"
+      "input input output output";
+    grid-template-rows: auto 1fr;
+  }
+
+  #top {
+    flex-flow: row;
+  }
+
+  #top a {
+    position: fixed;
+    right: 2em;
+  }
 }
 
 textarea {
@@ -100,6 +127,10 @@ textarea {
   font-weight: normal;
 }
 
+input[type=checkbox] {
+  transform: scale(1.3);
+}
+
 #input {
   grid-area: input;