Modified styles for the app to look better

assets/styles/gargoyle.scss

@@ -1,5 +1,7 @@
-$primary-color: orange;
+$primary-color: orangered;
 $primary-color-highlight: darken($primary-color, 10%);
+$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 
 $nav-bar-height: 60px;
 
@@ -8,6 +10,29 @@ body{
   background: lightgrey;
 }
 
+a{
+  color: $primary-color;
+  transition: all 230ms ease-in-out;
+
+  &:hover{
+    color: $primary-color-highlight;
+  }
+}
+
+.button.button-primary,
+button.button-primary,
+input[type="button"].button-primary,
+input[type="reset"].button-primary,
+input[type="submit"].button-primary{
+  background-color: $primary-color;
+  color: white;
+  transition: all 230ms ease-in-out;
+
+  &:hover{
+    background-color: $primary-color-highlight;
+  }
+}
+
 .container.fluid{
   max-width: 100%;
 }
@@ -19,7 +44,7 @@ body{
   width: 100%;
   height: $nav-bar-height;
   background: #212121;
-  box-shadow: 0 2px 1px rgba(0, 0, 0, .25);
+  box-shadow: $box-shadow-1;
   color: white;
 
   .nav-bar-left{
@@ -36,26 +61,43 @@ body{
 
   .site-logo,
   .nav-link a{
-    padding: 9px 12px;
+    padding: 10px 12px;
     font-size: 2.5rem;
+    text-decoration: none;
   }
 
   .site-logo{
+    padding-left: 35px;
     font-weight: bold;
   }
-
-  .nav-link a{
-    color: $primary-color;
-    transition: all 230ms ease-in-out;
-
-    &:hover{
-      color: $primary-color-highlight;
-    }
-  }
 }
 
 #main-content{
   margin-top: 25px;
-  padding: 15px 25px;
+  padding: 20px 32px;
   background: white;
+  box-shadow: $box-shadow-2;
+}
+
+#record-actions{
+  p{
+    margin-bottom: 0;
+    font-size: 2rem;
+  }
+}
+
+#item-header{
+  margin-bottom: 25px;
+
+  h1{
+    margin-bottom: 7px;
+  }
+
+  .item-added-date,
+  .item-updated-date{
+    margin-bottom: 5px;
+    color: #666;
+    font-size: 1.6rem;
+    font-style: italic;
+  }
 }