Added shadows, moved variables around

public/styles/components/_body-section.scss

@@ -3,7 +3,7 @@
  *    Body Section.
  *
  *  Dependencies:
- *    styles/settings/colors.scss
+ *    styles/tools/_shadow.scss
  *
  *  Version:
  *    1.0.0 - 2018/05/13
@@ -11,6 +11,7 @@
 $c-body-section--padding: 1em;
 
 .c-body-section {
+  @extend %t-dp--shadow;
   background: $s-color--background;
   padding: $c-body-section--padding;
 }

public/styles/index.scss

@@ -43,6 +43,7 @@
 
 @import './tools/_absolute-centering.scss';
 @import './tools/_input.scss';
+@import './tools/_shadow.scss';
 
 //Resets
 

public/styles/objects/_background.scss

@@ -3,6 +3,7 @@
  *    Styles for the background of the site.
  *
  *  Dependencies:
+ *    styles/settings/z.scss
  *    styles/tools/_absolute-centering.scss
  *
  *  Version:
@@ -14,7 +15,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
+  z-index: $s-z--background;
 
   //Civil Twilight
   &--style-twilight {

public/styles/objects/_navbar.scss

@@ -28,6 +28,7 @@ $o-navbar--link-thickness: 5px;
   &__nav {
     @extend %t-flexbox;
     @include t-align-items(stretch);
+    @extend %t-dp--shadow;
     background: $s-color--navbar;
     color: white;
   }
@@ -53,12 +54,13 @@ $o-navbar--link-thickness: 5px;
     color: $s-color--navbar__text;
 
     &:after {
+      @extend %t-dp--shadow;
       position: absolute;
       width: 100%;
       height: 0px;
       left: 0;
       bottom: 0px;
-      @include t-translate-y(100%)
+      @include t-translate-y(90%)
       transition: height 0.2s $s-animation--ease-out;
 
       content: " ";

public/styles/settings/colors.scss

@@ -28,6 +28,7 @@ $s-color--swatch-blue: #BAE1FF;
 */
 
 $s-color--background: white;
+$s-color--shadow: rgba(0, 0, 0, 0.5);
 
 //Hyperlink Colors
 $s-color--link: #FC78DE;

public/styles/settings/z.scss

@@ -6,4 +6,5 @@
  *    1.0.0 - 2018/05/07
  */
 
+$s-z--background: -1;
 $s-z--navbar: 10;   //Navbar

public/styles/tools/_input.scss

@@ -53,7 +53,7 @@ $t-input--style-dp__padding: 1em;
 
     background: $s-color--input-default__bottom;
     border: $s-color--input-default__border;
-    border-radius: $t-input--style-dp__padding / 3;
+    //border-radius: $t-input--style-dp__padding / 3;
 
     //Background Shadow (3D effect)
     @include t-box-shadow(
@@ -76,7 +76,7 @@ $t-input--style-dp__padding: 1em;
     background: $s-color--input-default__top;
     border: $s-color--input-default__border;
     transition: all 0.1s $s-animation--ease-out;
-    border-radius: $t-input--style-dp__padding / 3;
+    //border-radius: $t-input--style-dp__padding / 3;
 
     //Shine effect
     @include t-box-shadow(

public/styles/tools/_shadow.scss

@@ -0,0 +1,17 @@
+/*
+ *  domsPlace Shadows
+ *    Standard Shadows used throughout domsPlace
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss
+ *    styles/tools/_box-shadow.scss
+ */
+%t-dp--shadow {
+  @include t-box-shadow(
+    1em,
+    1em,
+    0,
+    0,
+    $s-color--shadow
+  );
+}