Building button costs turn green/red

gorge.css

@@ -126,7 +126,7 @@ button {
   color: #999;
 }
 
-.building-button .building-button-name {
+.building-button-name {
   font-size: 24px;
   position: absolute;
   left: 10%;
@@ -135,13 +135,21 @@ button {
   -moz-user-select: none;
 }
 
-.building-button .building-button-cost {
+.building-button-cost {
   font-size: 18px;
   position: absolute;
   left: 10%;
   bottom: 15%;
 }
 
+.building-button-cost-invalid {
+  color: #f22;
+}
+
+.building-button-cost-valid {
+  color: #1a1;
+}
+
 .building-button:hover {
   background-color: #333;
 }

gorge.js

@@ -142,13 +142,18 @@ function displayBuildings() {
 
     let button = document.querySelector("#building-" + key);
 
-    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 = costOfBuilding(key) + " food";
+    let name = document.querySelector("#building-" + key + " > .building-button-name");
+    let cost = document.querySelector("#building-" + key + " > .building-button-cost");
+
+    name.innerText = value.count + " " + (value.count == 1 ? buildings[key].name : buildings[key].plural);
+    cost.innerText = render(costOfBuilding(key)) + " food";
 
     if (costOfBuilding(key) > resources.food) {
       button.classList.add("building-button-disabled");
+      cost.classList.add("building-button-cost-invalid");
     } else {
       button.classList.remove("building-button-disabled");
+      cost.classList.add("building-button-cost-valid");
     }
   }
 }