Change blocks order depending on viewport size

static/style.css

@@ -17,6 +17,11 @@ nav {
   background-color: #2f5188;
   color: white;
   text-align: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 12vw;
+  z-index: 2;
   font-size: 8vw;
   display: flex;
   flex-direction: row;
@@ -59,20 +64,11 @@ a {
 }
 
 div#inputs {
-  position: absolute;
-  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;
 }
@@ -166,18 +162,23 @@ a.prevButton {
 }
 
 main {
-  position: absolute;
-  left: 30vw;
   background-color: #ebf3ff;
   min-height: 100%;
   padding-left: 40px;
 }
 
-@media (min-width: 992px) {
-  main {
-    top: 0;
-    left: 37vw;
-    right: 0;
+#body {
+  display: flex;
+  flex-direction: row;
+}
+
+@media (max-width: 991px) {
+  #credits {
+    display: none;
+  }
+
+  #body {
+    flex-direction: column-reverse;
   }
 }