Add styling and restructure of markup

src/components/Header.css

@@ -1,10 +1,10 @@
 .menu_icon [class*='menu_bar-'] {
-  background: #000;
+  background: #ffffff;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: 0.2s ease all;
   transition: 0.2s ease all;
-  height: 0.17rem;
+  height: 0.18rem;
   display: block;
   margin-bottom: 0.3rem;
 }

src/components/Header.js

@@ -8,7 +8,7 @@ import "./Header.css"
 let menuClasses = "no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4"
 
 const Header = () => (
-  <header className="bg-saburly-default">
+  <header className="bg-saburly-blue">
     <nav className="container mx-auto flex justify-between lg:p-6 p-4">
       <Link to="/">
         <img src={LogoSaburly} alt='Saburly Logo' className="max-w-xs" />
@@ -32,7 +32,7 @@ const Header = () => (
             <li className={menuClasses}>BLOG</li>
           </Link>
 
-          <Button text="Contact" standard classes="rounded-full text-white" url="/contact" />
+          <Button text="Contact" standard classes="rounded-full text-white hover:shadow" url="/contact" />
         </ul>
       </div>
     </nav>