some styles

VueApp/src/App.vue

@@ -61,7 +61,7 @@ export default {
 <style>
 @import '../node_modules/bootstrap/dist/css/bootstrap.css';
   .navbar {
-    background-color: #A1A6B4
+    background-color: #D0CFCF
   }
   .btn-margin {
     margin-top: 8px

VueApp/src/components/ElevationGraph.vue

@@ -30,7 +30,10 @@
           vAxis: {
             title: 'Feet'
           },
-          legend: 'none'
+          legend: 'none',
+          chartArea: {
+            backgroundColor: '#D0CFCF'
+          }
         }
       }
     },
@@ -66,5 +69,4 @@
 </script>
 
 <style scoped>
-
 </style>

VueApp/src/components/Main.vue

@@ -1,11 +1,5 @@
 <template>
   <div v-if="authenticated" class="main-container">
-    <div class="appHeader">
-      <h4>
-        Click the map in two places to begin.
-        You may drag either the markers or the route itself to adjust the path.
-      </h4>
-    </div>
     <div class="mainMap">
       <GoogleMap v-on:updateRoute="updateElevation"/>
     </div>
@@ -44,21 +38,15 @@
 <style scoped>
   body {
     display: grid;
-    grid-template-rows: 100px 3fr 2fr;
-    grid-template-columns: 1fr 3fr 3fr 1fr;
+    grid-template-rows: 3fr 1fr;
+    grid-template-columns: 1fr 2fr 2fr 1fr;
     grid-template-areas:
-      "header header header header"
-      "......  map    map  ......."
-      "info   info    info    info";
+      "map     map    map     map "
+      "....   info    info    ....";
     justify-items: center;
     align-items: center;
   }
 
-  .appHeader {
-    grid-area: header;
-    justify-self: center;
-  }
-
   .mainMap {
     grid-area: map;
   }