Added slogan

1 files changed, 16 insertions, 14 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 35abb1b..35c5dfb 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5,6 +5,7 @@
   --color-lighter-blue: #89D0F2;
   --color-grey:         #2D3436;
   --color-light-grey:   #636E72;
+  --color-white:        #eee;
 }
 
 @font-face {
@@ -47,12 +48,12 @@ body {
 /* header                                                                    */
 
 header {
-  padding: 10px;
+  padding: 0 10px;
   background-color: var(--color-darker);
 }
 
 header .header-container {
-  max-width: 300px;
+  max-width: 450px;
   margin: auto;
   display: flex;
   justify-content: space-between;
@@ -60,26 +61,27 @@ header .header-container {
 
 a.header-link {
   display: block;
+  padding: 10px 5px;
   font-weight: bold;
   text-decoration: none;
   text-transform: capitalize;
 }
 
-a.header-link:not(:last-child)::after {
-  content: '/';
-  position: relative;
-  right: -10px;
-}
+/* a.header-link:not(:last-child)::after { */
+/*   content: '/'; */
+/*   position: relative; */
+/*   right: -10px; */
+/* } */
 
 a.header-link,
 a.header-link:visited {
-  color: #eee;
+  color: var(--color-white);
+  background-color: var(--color-darker);
 }
 
-a.header-link:hover,
-a.header-link:focus,
-a.header-link:active {
-  color: var(--color-light-grey);
+a.header-link:hover {
+  color: var(--color-white);
+  filter: invert(1);
 }
 
 /*****************************************************************************/
@@ -113,7 +115,7 @@ a:hover, a:focus, a:active {
 /* title */
 
 @font-face {
-  font-family: Montserrat, sans-serif;
+  font-family: Montserrat-Bold, sans-serif;
   font-weight: bold;
   src: url(../font/Montserrat/Montserrat-Bold.ttf);
 }
@@ -122,7 +124,7 @@ h1, h2, h3, h4 {
   margin: 10px 0 5px 0;
   line-height: 1.42;
   font-weight: bold;
-  font-family: Montserrat;
+  font-family: Montserrat-Bold;
   letter-spacing: 0.1rem;
 }