Working on inventory

satiate.css

@@ -411,18 +411,56 @@ a:hover {
 }
 
 #area-name {
-  margin: 10px 0px;
-  padding: 10px;
-  background: rgba(255,255,255,0.07);
   font-size: 36px;
 }
 
 #area-desc {
+
+}
+
+#inventory-info {
   margin: 10px 0px;
   padding: 10px;
   background: rgba(255,255,255,0.07);
+  flex: 1 0;
+}
+
+#inventory-header {
+  text-align: center;
+  font-size: 36px;
+}
+
+#inventory-items {
+  display: flex;
+  flex-direction: column;
+}
+
+.inventory-item {
+  display: flex;
 }
 
+.inventory-item-name {
+  flex: 3;
+  font-size: 24px;
+}
+
+.inventory-item-button {
+  flex: 1;
+  font-size: 24px;
+  display: inline-block;
+  user-select: none;
+  background-color: #111;
+  border: 1px solid #333;
+  color: #eee;
+}
+
+.inventory-item-button:active {
+  background-color: #222;
+}
+
+.inventory-item-button:focus {
+  outline: 0px;
+}
 #log::-webkit-scrollbar {
   width: 3px;
   height: 2px;

satiate.html

@@ -45,7 +45,8 @@
             <button class="game-menu-button" id="game-menu-button">Menu</button>
           </div>
           <div id="world-info">
-            <div class="info-header" id="world-info-header">World</div>
+            <div id="area-name"></div>
+            <div id="area-desc"></div>
             <div id="world-info-time">Time to get a watch!</div>
           </div>
           <div id="player-info">
@@ -54,9 +55,17 @@
         </div>
         <div id="log">
         </div>
-        <div class="sidebar" id="area-info">
-          <div id="area-name"></div>
-          <div id="area-desc"></div>
+        <div class="sidebar">
+          <div id="inventory-info">
+            <div id="inventory-header">Inventory</div>
+            <div id="inventory-items">
+              <div class="inventory-item">
+                <span class="inventory-item-name">Burger</span>
+                <button class="inventory-item-button">Use</button>
+                <button class="inventory-item-button">Examine</button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div id="control-area">