Move navbar on top on small devices

static/style.css

@@ -14,21 +14,39 @@ h2 {
 }
 
 nav {
-  width: 7vw;
   background-color: #2f5188;
   color: white;
   text-align: center;
-  font-size: 3vw;
-  min-height: 100vh;
+  font-size: 8vw;
+  display: flex;
+  flex-direction: row;
 }
 
 nav > * {
   display: inline-block;
-  width: 7vw;
-  height: 7vw;
+  width: 16.66vw;
   padding-top: 2vw;
   cursor: pointer;
-  border-bottom: 1px solid #3b68b0;
+}
+
+nav > *:not(:nth-child(1)) {
+  border-left: 1px solid #3b68b0;
+}
+
+@media (min-width: 992px) {
+  nav {
+    flex-direction: column;
+    width: 7vw;
+    min-height: 100vh;
+    font-size: 3vw;
+  }
+
+  nav > * {
+    width: 7vw;
+    height: 7vw;
+    border-bottom: 1px solid #3b68b0;
+    border-left: initial !important;
+  }
 }
 
 nav > .active-tab {
@@ -42,13 +60,19 @@ a {
 
 div#inputs {
   position: absolute;
-  top: 0;
-  left: 7vw;
+  left: 0;
   width: 30vw;
   height: 100%;
   background-color: white;
 }
 
+@media (min-width: 992px) {
+  div#inputs {
+    top: 0;
+    left: 7vw;
+  }
+}
+
 .colorpicker input[type="radio"] {
   display: none;
 }
@@ -143,14 +167,20 @@ a.prevButton {
 
 main {
   position: absolute;
-  top: 0;
-  left: 37vw;
-  right: 0;
+  left: 30vw;
   background-color: #ebf3ff;
   min-height: 100%;
   padding-left: 40px;
 }
 
+@media (min-width: 992px) {
+  main {
+    top: 0;
+    left: 37vw;
+    right: 0;
+  }
+}
+
 main > div:nth-child(1) {
   text-align: right;
   width: 600px;