Building buttons fit properly, and gray out when unusable. Can buy when you have exactly enough food now

gorge.css

@@ -30,7 +30,7 @@ body.dark {
 
 .building-button {
   display: block;
-  width: 100%;
+  width: 90%;
   height: 75px;
   background-color: #222;
   color: #eee;
@@ -40,6 +40,11 @@ body.dark {
   user-select: none;
 }
 
+.building-button-disabled {
+  background-color: #111;
+  color: #999;
+}
+
 .building-button .building-button-name {
   font-size: 24px;
   position: relative;
@@ -60,6 +65,10 @@ body.dark {
   background-color: #333;
 }
 
+.building-button-disabled:hover {
+  background-color: #111 !important;
+}
+
 .building-button:active {
   border-color: #333;
   background-color: #111;

gorge.js

@@ -26,8 +26,8 @@ function productivityOf(type) {
   return baseProd * belongings[type].count;
 }
 
-function costOf(type) {
-  let baseCost =  buildings[type].cost
+function costOfBuilding(type) {
+  let baseCost = buildings[type].cost
 
   let countCost = baseCost * Math.pow(1.15, belongings[type].count);
 
@@ -35,9 +35,9 @@ function costOf(type) {
 }
 
 function buyBuilding(type) {
-  let cost = costOf(type);
+  let cost = costOfBuilding(type);
 
-  if (resources.food > cost) {
+  if (resources.food >= cost) {
     belongings[type].count += 1;
     resources.food -= cost;
   }
@@ -67,7 +67,13 @@ function displayResources() {
 function displayBuildings() {
   for (const [key, value] of Object.entries(belongings)) {
     document.querySelector("#building-" + key + " > .building-button-name").innerText = value.count + " " + (value.count == 1 ? buildings[key].name : buildings[key].plural);
-    document.querySelector("#building-" + key + " > .building-button-cost").innerText = costOf(key) + " food";
+    document.querySelector("#building-" + key + " > .building-button-cost").innerText = costOfBuilding(key) + " food";
+
+    if (costOfBuilding(key) > resources.food) {
+      document.querySelector("#building-" + key).classList.add("building-button-disabled");
+    } else {
+      document.querySelector("#building-" + key).classList.remove("building-button-disabled");
+    }
   }
 }