Changed styling to fit better for mobile devices

out/css/pc.css

@@ -63,8 +63,10 @@
     height: 2.5em;
     line-height: 1em;
     margin: 0;
+    margin-bottom: .5em;
     vertical-align: top;
     padding: 0.25em 2em;
+    font-size: 0.75em;
 }
 
 /* CONTROLS COLORS */
@@ -699,7 +701,7 @@ th.address {
     .pc{
         grid-template-rows: auto max-content auto;
         justify-items: center;
-        overflow-x: hidden;
+        /*overflow-x: hidden;*/
     }
 
     .pc .section {
@@ -710,18 +712,22 @@ th.address {
         max-height: 50rem;
     }
 
+    .pc .controls {
+        text-align: center;
+    }
+
     .pc .grid-fullwidth.grid-addressbus,
     .pc .grid-fullwidth.grid-databus {
         --width: 5rem;
-        --text-height: 35rem;
+        --text-height: 32rem;
         --margin-side: 2rem;
 
         width: var(--width);
         box-sizing: border-box;
-        grid-row: 2 / span 3;
+        grid-row: 1 / span 3;
 
         position: relative;
-        padding-bottom: var(--text-height);
+        padding-bottom: calc(var(--text-height) - var(--width));
     }
 
     .pc .grid-fullwidth.grid-addressbus {
@@ -763,10 +769,31 @@ th.address {
         -o-transform: var(--transformation);
 
         background-color: transparent;
+
+        padding-right: 1em;
+        text-align:  right;
+    }
+
+    .pc .grid-fullwidth.grid-databus > * {
+        float: right;
+        --transformation:  rotate(-90deg) translate( calc(var(--width) / 2 - 50%), calc( -50% + var(--text-height) / 2));
+    }
+
+    .pc .grid-fullwidth.grid-addressbus input,
+    .pc .grid-fullwidth.grid-databus input {
+        margin-right: 0;
     }
 
     .pc .controls.grid-fullwidth {
         grid-column: 1 / span 3;
+
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        background-color: var(--color-body);
+        margin: -1rem;
+        padding: 1rem;
+        border-bottom: 1px solid var(--color-controls-button-border);
     }
 
 
@@ -786,7 +813,7 @@ th.address {
     }
 
     .pc .arrow.up{
-        left: inherit;
+        left: auto !important;
         right: 0;
         top: 25%;
         --transformation: rotate(90deg) translate(0, -2.5rem);
@@ -796,11 +823,20 @@ th.address {
     }
 
     .pc .arrow.top {
-        right: inherit;
+        right: auto !important;
         left: -4.5rem !important;
         top: 25%;
     }
 
+    /*.pc .arrow.up ~ .arrow.up {
+        
+
+    }
+
+    .pc .arrow.up ~ .arrow.up ~ .arrow.up {
+
+    }*/
+
     .pc .arrow.arrow2{
         top: 75%;
     }

out/css/style.css

@@ -1,6 +1,7 @@
 body {
 	background-color: var(--color-body);
 	color: var(--color-body-text);
+	font-size: 1.4em;
 }
 
 code {