Tidied up the formatting; added a bit of mobile layout

satiate.css

@@ -3,6 +3,7 @@ html, body {
   height: 100%;
   color: #eee;
   background-color: #333;
+  font-family: sans-serif;
 }
 
 #info-area {
@@ -46,10 +47,15 @@ html, body {
   max-height: 40%;
 }
 
+@media (min-aspect-ratio: 1/1) {
+  #actions {
+    flex-wrap: wrap;
+  }
+}
+
 #actions {
   position: relative;
   flex-direction: column;
-  flex-wrap: wrap;
   align-items: center;
   display: flex;
   padding: 25px;
@@ -64,6 +70,8 @@ html, body {
   width: 250px;
   background-color: #888;
   color: #eee;
+  margin: 5px;
+  font-size: 24px;
 }
 
 
@@ -84,19 +92,32 @@ html, body {
 #move-holder {
   position: absolute;
   left: 50%;
+  margin-left: -100px;
   top: 15%;
 }
 
+@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: 50px;
-  height: 50px;
   background-color: #888;
   color: #eee;
   border-radius: 5px;
 }
 
 /* nicked from the internet */
-
+/*
 .move-button:before,
 .move-button:after {
   content: '';
@@ -109,16 +130,16 @@ html, body {
 }
 .move-button:before {
   top: 9px;
-  -webkit-transform: rotate(65deg);
-  -ms-transform: rotate(65deg);
-  transform: rotate(65deg);
+  -webkit-
+  -ms-
+
 }
 .move-button:after {
   bottom: 9px;
-  -webkit-transform: rotate(-65deg);
-  -ms-transform: rotate(-65deg);
-  transform: rotate(-65deg);
-}
+  -webkit-
+  -ms-
+
+}*/
 
 .disabled {
   background-color: gray;
@@ -127,92 +148,93 @@ html, body {
 
 .move-button > span {
   display: inline-block;
+  font-size: 24px;
 }
 
 #move-up-left {
   position: absolute;
-  left: -70px;
-  top: 30px;
-  transform: rotate(-135deg);
+  left: -140px;
+  top: 60px;
+
 }
 
 #move-up-left > span {
-  transform: rotate(135deg);
+
 }
 
 #move-up {
   position: absolute;
   left: 0px;
   top: 0px;
-    transform: rotate(-90deg);
+
 }
 
 #move-up > span {
-  transform: rotate(90deg);
+
 }
 
 #move-up-right {
   position: absolute;
-  left: 70px;
-  top: 30px;
-  transform: rotate(-45deg);
+  left: 140px;
+  top: 60px;
+
 }
 
 #move-up-right > span {
-  transform: rotate(45deg);
+
 }
 
 #move-left {
   position: absolute;
-  left: -100px;
-  top: 100px;
-  transform: rotate(-180deg);
+  left: -200px;
+  top: 120px;
+
 }
 
 #move-left > span {
-  transform: rotate(180deg);
+
 }
 
 #move-right {
   position: absolute;
-  left: 100px;
-  top: 100px;
-  transform: rotate(0deg);
+  left: 200px;
+  top: 120px;
+
 }
 
 #move-right > span {
-  transform: rotate(0deg);
+
 }
 
 #move-down-left {
   position: absolute;
-  left: -70px;
-  top: 170px;
-  transform: rotate(-225deg);
+  left: -140px;
+  top: 180px;
+
 }
 
 #move-down-left > span {
-  transform: rotate(225deg);
+
 }
 
 #move-down {
   position: absolute;
   left: 0px;
-  top: 200px;
-  transform: rotate(-270deg);
+  top: 240px;
+
 }
 
 #move-down > span {
-  transform: rotate(270deg);
+
 }
 
 #move-down-right {
   position: absolute;
-  left: 70px;
-  top: 170px;
-  transform: rotate(-315deg);
+  left: 140px;
+  top: 180px;
+
 }
 
 #move-down-right > span {
-  transform: rotate(315deg);
+
 }

satiate.html

@@ -42,6 +42,8 @@
       <button class="action-button">potato 6</button>
       <button class="action-button">potato 7</button>
       <button class="action-button">potato 8</button>
+      <button class="action-button">potato 9</button>
+      <button class="action-button">potato 10</button>
     </div>
     <div id="desc">
       this is a description of your action
@@ -49,14 +51,14 @@
     <div id="moves">
       beep beep
       <div id="move-holder">
-        <button class="move-button" id="move-up-left"><span>NW</span></button>
-        <button class="move-button" id="move-up"><span>N</span></button>
-        <button class="move-button" id="move-up-right"><span>NE</span></button>
-        <button class="move-button" id="move-left"><span>W</span></button>
-        <button class="move-button" id="move-right"><span>E</span></button>
-        <button class="move-button" id="move-down-left"><span>SW</span></button>
-        <button class="move-button" id="move-down"><span>S</span></button>
-        <button class="move-button" id="move-down-right"><span>SE</span></button>
+        <button class="move-button" id="move-up-left"><span>Potato Factory</span></button>
+        <button class="move-button" id="move-up"><span>Door</span></button>
+        <button class="move-button" id="move-up-right"><span>Butts</span></button>
+        <button class="move-button" id="move-left"><span>Fen's Snack Pile</span></button>
+        <button class="move-button" id="move-right"><span>Vore</span></button>
+        <button class="move-button" id="move-down-left"><span>Dennis</span></button>
+        <button class="move-button" id="move-down"><span>Ectoplasm</span></button>
+        <button class="move-button" id="move-down-right"><span>E</span></button>
       </div>
     </div>
   </div>