Mobile layout! Mobile layout!

satiate.css

@@ -127,7 +127,28 @@ a:hover {
 #info-area {
   position: relative;
   display: flex;
-  height: 60%;
+}
+
+
+@media (max-aspect-ratio: 1/1) {
+  #info-area {
+    height: 50%;
+  }
+
+  #control-area {
+    height: 50%;
+    flex-direction: column;
+  }
+}
+
+@media (min-aspect-ratio: 1/1) {
+  #info-area {
+    height: 60%;
+  }
+
+  #control-area {
+    height: 40%;
+  }
 }
 
 #log {
@@ -183,8 +204,6 @@ a:hover {
 
 #control-area {
   display: flex;
-  min-height: 40%;
-  max-height: 40%;
 }
 
 @media (min-aspect-ratio: 1/1) {
@@ -196,12 +215,12 @@ a:hover {
 #actions {
   position: relative;
   flex-direction: column;
+  flex-wrap: wrap;
   align-items: center;
   display: flex;
   padding: 25px;
   font-size: 24px;
   background: rgba(255, 255, 255, 0.1);
-  flex: 1;
   max-height: 100%;
 }
 
@@ -219,9 +238,30 @@ a:hover {
   padding: 25px;
   font-size: 18px;
   background: rgba(255, 255, 255, 0.15);
-  flex: 1;
 }
 
+@media (max-aspect-ratio: 1/1) {
+  #desc {
+    flex: 1;
+  }
+
+  #actions {
+    flex: 1;
+  }
+}
+
+@media (max-aspect-ratio: 1/1) {
+  #desc {
+    flex: 0.3;
+  }
+
+  #actions {
+    flex: 0.5;
+  }
+}
+
+
+
 #moves {
   padding: 25px;
   position: relative;
@@ -236,18 +276,9 @@ a:hover {
   top: 5%;
 }
 
-@media (max-aspect-ratio: 1/1) {
-  .move-button {
-    width: 100px;
-    height: 100px;
-  }
-}
-
-@media (min-aspect-ratio: 1/1) {
-  .move-button {
-    width: 200px;
-    height: 50px;
-  }
+.move-button {
+  width: 200px;
+  height: 50px;
 }
 
 .move-button {