Creo que deje los estilo, PERFECTOS <3

resources/sass/app.scss

@@ -1,61 +1,44 @@
-/**
- * Ryuuji 
- */
-
-$colorfg: #212121;
-$colorborder: #f2f2f2;
-$color01: #0fa0ce;
+@import "~normalize.css/normalize.css";
+@import "fonts.scss";
+@import "variables.scss";
 
+/* Base
+-------------------------------------*/
+html {
+    overflow-y: scroll;
+    background-color: white;
+}
 body {
+    font-size: 15px;
+    line-height: 1.6rem;
+    font-family: "OpenSans", sans-serif;
     color: $colorfg;
-    line-height: 1.6em;
-    font-size: 1.25em;
-    max-width: 80ch;
-    padding: 2rem;
-    margin: auto;
 }
 
 hr {
     border: 1px solid $colorborder;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  letter-spacing: .1rem; 
+  font-weight: 600; 
+  text-transform: uppercase;
+}
+
 a {
     color: $colorfg;
 }
 
-form label {
-    display: block;
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: .9em;
-}
-
-form input {
-    display: block;
-    width: 100%;
-    height: 2em;
-    border: 1px solid $colorfg;
-    border-radius: 4px;
-    margin-bottom: 1em;
-    padding: .4em;
-}
-
-button {
-    display: inline-block;
-    box-sizing: border-box;
-    text-align: center;
-    cursor: pointer;
-    color: $colorfg;
-    border: 1px solid $colorfg;
-    border-radius: 4px;
-    background-color: #fff;
-
-    font-weight: bold;  
-    height: 3em;
-    padding: 0 3em;
-    text-transform: uppercase;
+.container{
+    max-width: 38rem;
+    padding: 2rem;
+    margin: auto;
 }
 
+/* Nav Bar
+-------------------------------------*/
 .navbar {
     display: flex;
     border-bottom: 1px solid $colorborder;
@@ -63,27 +46,81 @@ button {
 
 .navbar-items {
     display: flex;
-    list-style: none;
-    padding-left: 0;
-}
+    width: 38rem;
+    padding: 1rem 0;
+    margin: auto;
 
-.navbar-item a {
-    text-transform: uppercase;
-    font-weight: bold;
-    letter-spacing: .2rem;
-    text-decoration: none;
-    margin-left: 1em;
     color: $colorfg;
 
-}
-.navbar-item a:hover {
-    color: $color01; 
+    list-style: none;
+    letter-spacing: .2rem;
+    line-height: 2rem;
+    text-transform: uppercase;
+    justify-content: space-between;
 }
 
+.navbar-item-link{
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.navbar-item-head{
+    text-decoration: none;
+    font-weight: 700;
+}
+
+.navbar-item-link:hover { color: $color01; }
 
 @media only screen and (max-width: 768px) {
-    .navbar-items, .navbar {
+    .navbar {
+        width: 100%;
+        margin: 1rem auto;
+    }
+    .navbar-items {
         flex-direction: column;
+        text-align: center;
+    }
+
+    .navbar-item-head{
+        font-size: 1.5rem;
+        margin-bottom: .6rem;
     }
 }
 
+/* Forms
+-------------------------------------*/
+label {
+    display: block;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.form-input {
+    display: block;
+    width: 100%;
+    height: 2rem;
+    border: 1px solid $colorfg;
+    border-radius: 4px;
+    margin-bottom: 1em;
+    padding: .4em;
+}
+
+textarea.form-input {
+    height: 20rem;
+}
+
+.form-submit {
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+    color: $colorfg;
+    border: 1px solid $colorfg;
+    border-radius: 4px;
+    background-color: #fff;
+
+    font-weight: 600;  
+    height: 2.4rem; 
+    padding: 0 2rem;
+    text-transform: uppercase;
+}
+