Improve styling

ui/static/style.css

@@ -10,21 +10,44 @@ body {
 body {
     display: grid;
     grid-template-rows: 10vh auto;
-    grid-template-columns: auto;
+    grid-template-columns: 25vw 50vw 25vw;
     grid-template-areas:
-    "header"
-    "main";
+    "empty1 header empty2"
+    "main main main";
 }
 
-header {
+@media (orientation: portrait) {
+    body {
+        grid-template-rows: 10vh 10vh auto;
+        grid-template-columns: auto;
+        grid-template-areas:
+        "logo"
+        "header"
+        "main";
+    }
+}
+
+#logo {
+    grid-area: 1 / 1 / 1 / 1;
+    padding: 0.5rem;
+}
+
+#logo img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#title {
     grid-area: header;
     display: flex;
     justify-content: center;
+    text-align: center;
 }
 
 main {
     grid-area: main;
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
+    align-items: center;
     flex-direction: column;
 }