style: adjust styles & responsive for header

Author: mickaelalvs

modules/header/header.module.css

@@ -5,7 +5,7 @@
   padding-top: 20px;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1200px) {
   .navbar,
   .socialLinks {
     display: none !important;

modules/navigation/Navbar.module.css

@@ -7,7 +7,7 @@
   display: inline-flex;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1200px) {
   .navbar ul {
     flex-direction: column;
     align-items: center;

modules/navigation/mobile/MobileNavigation.module.css

@@ -1,4 +1,4 @@
-@media (min-width: 900px) {
+@media (min-width: 1200px) {
   .mobilePanel,
   .mobileButton {
     display: none !important;

modules/navigation/mobile/button/MobileNavigationButton.module.css

@@ -1,14 +1,17 @@
 .button {
   position: absolute;
-  right: 5px;
-  top: 5px;
-  width: 4rem;
-  height: 4rem;
+  right: 12px;
+  top: 12px;
+  width: 3.5rem;
+  height: 3.5rem;
   color: var(--font-color-strong);
+  background-color: var(--background-card);
+  border-radius: 12px;
   display: inline-flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 1rem;
+  padding: 0.875rem;
+  cursor: pointer;
   z-index: 999;
 }