Significantly improved mobile styling

gorge.css

@@ -31,6 +31,7 @@ button {
 }
 
 #top-bar {
+  font-size: 36px;
   background-color: #322;
   position: absolute;
   width: 100%;
@@ -41,6 +42,10 @@ button {
   margin: auto;
 }
 
+#top-bar > button {
+  font-size: 36px;
+}
+
 #resources-area {
   position: absolute;
   text-align: center;
@@ -71,6 +76,16 @@ button {
   overflow-y: scroll;
 }
 
+@media (max-aspect-ratio: 1/1) {
+  #buildings-area {
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    height: 50%;
+  }
+
+}
+
 #building-tooltip {
   position: fixed;
   width: 400px;
@@ -176,6 +191,15 @@ button {
   top: 10%;
 }
 
+@media (max-aspect-ratio: 1/1) {
+  #upgrades-area {
+    position: absolute;
+    left: 50%;
+    height: 50%;
+    width: 50%;
+  }
+}
+
 .title {
   font-size: 48px;
   height: 10%;
@@ -235,16 +259,25 @@ button {
 .upgrade-button {
   width: 100px;
   height: 100px;
+  margin: 10px;
   display: block;
   background-color: #444;
 }
 
+@media (max-aspect-ratio: 1/1) {
+  .upgrade-button {
+    width: 13vw;
+    height: 13vw;
+  }
+}
+
 .upgrade-button-inactive {
   background-color: #222 !important;
   color: #999 !important;
 }
 
 .upgrade-button-name {
+  pointer-events: none;
   position: relative;
   text-align: center;
   width: 100px;
@@ -254,6 +287,7 @@ button {
   right: 50%;
   left: 50%;
   margin: -25px -50px;
+
 }
 
 .click-popup-food {