navbar component and some main.css changes

assets/css/main.css

@@ -35,12 +35,79 @@
   --color-error: #B40502;
   --color-success: #039B65;
 
-  /* Breakpoints */
-  --breakpoint-large: 480rem; /* Super desktop 1920px */
-
   /* Font sizes */
   --text-5.5: 1.375rem; /* 22px */
   --text-8: 2rem; /* 32px */
+
+  /* Shadow */
+  --shadow-button: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+}
+
+
+/* Breakpoints */
+/* Desktop < 1920px; */
+/* Tablet < 1024px; */
+/* Mobile < 640px; */
+
+/* Super desktop */
+@media screen and (min-width: 1920px) {
+  :root {
+    --default-font-size: var(--font-size-lg); /* 18px */
+    --layout-padding-x: 2rem; /* 32px */
+
+    --font-size-Hero: 48px;
+    --font-size-H1: 48px;
+    --font-size-H2: 36px;
+    --font-size-H3: 32px;
+    --font-size-H4: 22px;
+    --font-size-H5: 16px;
+    --font-size-2xl: 24px;
+    --font-size-lg: 18px;
+    --font-size-base: 16px;
+    --font-size-sm: 14px;
+    --font-size-xs: 12px;
+    --font-size-button-base: 16px;
+  }
+}
+/* Tablet */
+@media screen and (max-width: 1023px) {
+  :root {
+    --default-font-size: var(--font-size-lg); /* 16px */
+    --layout-padding-x: 1rem; /* 16px */
+
+    --font-size-Hero: 40px;
+    --font-size-H1: 40px;
+    --font-size-H2: 32px;
+    --font-size-H3: 24px;
+    --font-size-H4: 22px;
+    --font-size-H5: 16px;
+    --font-size-2xl: 20px;
+    --font-size-lg: 16px;
+    --font-size-base: 16px;
+    --font-size-sm: 14px;
+    --font-size-xs: 12px;
+    --font-size-button-base: 14px;
+  }
+}
+/* Mobile */
+@media screen and (max-width: 640px) {
+  :root {
+    --default-font-size: var(--font-size-lg); /* 16px */
+    --layout-padding-x: 0.5rem; /* 8px */
+
+    --font-size-Hero: 32px;
+    --font-size-H1: 32px;
+    --font-size-H2: 30px;
+    --font-size-H3: 24px;
+    --font-size-H4: 22px;
+    --font-size-H5: 16px;
+    --font-size-2xl: 18px;
+    --font-size-lg: 16px;
+    --font-size-base: 16px;
+    --font-size-sm: 14px;
+    --font-size-xs: 12px;
+    --font-size-button-base: 14px;
+  }
 }
 
 @font-face {
@@ -86,9 +153,11 @@
 html,
 body {
   font-family: var(--font-barlow);
-  font-size: 18px;
+  font-size: var(--default-font-size, 16px);
   height: 100dvh;
   color: var(--color-black);
+  margin: 0 var(--layout-padding-x, 32px);
+  background-color: var(--color-background-extra-light);
 }
 
 body footer {
@@ -110,4 +179,13 @@ html {
 
 .body-overflow-hidden {
   overflow: hidden;
+}
+
+.bg-gradient-conic {
+  background: conic-gradient(
+    from 179deg at -5.88% 52.83%, 
+    var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 53.653846979141235deg, 
+    var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 155.76923489570618deg, 
+    var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg), 
+    var(--Background--bg-light, #F9F4F2);
 }