Improve look of the options pane

macrovision.css

@@ -40,9 +40,25 @@ body {
 
 #options {
     flex: 1 0 15vw;
+    display: flex;
+    justify-content: start;
+    flex-direction: column;
     background: #444;
 }
 
+.options-row {
+    display: flex;
+    text-align: center;
+}
+
+.options-header {
+    text-align: center;
+    font-size: 24pt;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+
 #entities {
     position: relative;
     user-select: none;
@@ -77,7 +93,20 @@ body {
     background: #333;
 }
 
-#options input {
+#options .options-label {
+    flex: 0 1;
+    width: 100%;
+    font-size: 150%;
+}
+
+.options-row input {
+    flex: 1;
+    width: 50%;
+    font-size: 150%;
+}
+
+.options-row select {
+    flex: 1;
     width: 50%;
     font-size: 150%;
 }

macrovision.html

@@ -24,22 +24,29 @@
   </div>
   <div id="main-area">
     <div id="options">
-      <div class="option-row">
+      <div class="options-header">World options</div>
+      <div class="options-label">
+        World height
+      </div>
+      <div class="options-row">
         <input type="number" id="options-height-value" min="1" value="10">
         <select id="options-height-unit">
           <option>meters</option>
           <option>kilometers</option>
         </select>
       </div>
+      <div class="options-header">Entity options</div>
+      <div class="options-header">View options</div>
     </div>
     <div id="world">
       <div id="entities">
-  
+
       </div>
       <canvas id="display">
       </canvas>
     </div>
   </div>
-  
+
 </body>
+
 </html>