1 files changed, 12 insertions, 22 deletions

diff --git a/styles.css b/styles.css
index b5698fe..39a7c9d 100644
--- a/styles.css
+++ b/styles.css
@@ -5,7 +5,6 @@
     --background-l3:        #7c8083;
     --toggle-bg:            #000;
     --header-bg:            #FFF;
-    --vertical-block-space: 3.5rem;
     --text:                 #000;
     --text-l1:              #1976d3;
     --text-l2:              #FFF;
@@ -17,28 +16,22 @@
     --h6:                   #73828c;
 }
 
-div, button {
-    margin: 0;
-    padding: 0;
-}
-
 html {
     font-family: "liberation serif", "times new roman", calibri, carlito, serif;
     color: var(--text);
+    font-size: 16px;
 }
 
 body {
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr 1fr;
-    grid-gap: 10px 10px;
+    grid-template-rows: repeat(3, auto);
+    grid-gap: 1rem;
     grid-template-areas:
         "header"
         "main"
         "footer";
-    /* Fix height */
     height: 100vh;
-    /* grid-template-rows: auto 1fr auto; */
 }
 
 .text-center {
@@ -48,8 +41,8 @@ body {
 .header {
     display: grid;
     grid-template-columns: 60px auto 60px;
-    grid-template-rows: auto auto;
-    gap: 0px 0px;
+    grid-template-rows: repeat(2, auto);
+    grid-gap: 0px 0px;
     grid-template-areas:
         "navbar-toggle logo-name   ."
         "navbar-menu   navbar-menu navbar-menu";
@@ -66,10 +59,6 @@ body {
     z-index: 100;
 }
 
-.l-block {
-    margin-bottom: var(--vertical-block-space);
-}
-
 .navbar-menu {
     grid-area: navbar-menu;
 
@@ -330,6 +319,9 @@ input[type="search"] {
     grid-template-areas:
         "categories"
         "shopping";
+    margin-top: 1.5rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
 }
 
 /* ------ Hidden arrows ------ */
@@ -350,13 +342,12 @@ input::-webkit-inner-spin-button {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto auto;
-    grid-row-gap: 10px;
+    grid-row-gap: 1rem;
     grid-template-areas:
         "footer-info"
         "copy-info";
 
     background: var(--background);
-    border-radius: 10px;
     color: var(--text-l2);
 }
 
@@ -394,13 +385,12 @@ input::-webkit-inner-spin-button {
 /* For desktop: */
 @media only screen and (min-width: 992px) {
     body {
-        height: auto;
-        grid-template-rows: auto auto auto;
+        grid-template-rows: repeat(3, 1fr);
     }
     .header {
         display: grid;
-        grid-template-columns: auto auto auto;
-        grid-template-rows: auto auto;
+        grid-template-columns: repeat(3, auto);
+        grid-template-rows: repeat(2, auto);
         grid-template-areas: "logo-name navbar-menu sc-form";
         background: var(--header-bg);
     }