add mobile controls

style.css

@@ -5,14 +5,13 @@
   --start-button-color: #597ea7;
 }
 
-
 @font-face {
-  font-family: "C64 TrueType";
+  font-family: 'C64 TrueType';
   src: url('fonts/C64_Pro_Mono-STYLE.eot');
   src: url('fonts/C64_Pro_Mono-STYLE.eot') format('embedded-opentype'),
-       url('fonts/C64_Pro_Mono-STYLE.woff2') format('woff2'),
-       url('fonts/C64_Pro_Mono-STYLE.woff') format('woff'),
-       url('fonts/C64_Pro_Mono-STYLE.ttf') format('truetype');
+    url('fonts/C64_Pro_Mono-STYLE.woff2') format('woff2'),
+    url('fonts/C64_Pro_Mono-STYLE.woff') format('woff'),
+    url('fonts/C64_Pro_Mono-STYLE.ttf') format('truetype');
 }
 
 body {
@@ -20,7 +19,6 @@ body {
 }
 
 .controls-wrapper {
-  display: none;
 }
 
 .dpad-wrapper {
@@ -32,7 +30,14 @@ body {
   flex-direction: column;
   padding: 20px;
   justify-content: center;
+
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
 }
+
 .dpad-top-bottom {
   margin-left: auto;
   margin-right: auto;
@@ -74,13 +79,34 @@ body {
   border-radius: 50%;
   margin: auto;
 }
+
+.button-a {
+  margin-top: 50%;
+}
+
+.button-b {
+  margin-bottom: 50%;
+}
+
 .buttons-wrapper {
   background-color: var(--shell-color);
   border-radius: 60px;
-  height: 100px;
-  width: 240px;
+  height: 200px;
+  width: 180px;
   display: flex;
   padding: 10px;
+
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@media only screen and (min-width: 1000px) {
+  .dpad-wrapper,
+  .buttons-wrapper {
+    display: none;
+  }
 }
 
 #platformer {