change mobile menu styling

css/style.css

@@ -488,7 +488,7 @@ button:active, .button-primary:active, .logo:active {
   position: sticky;
   top: 0;
   padding-top: max(1px, env(safe-area-inset-top));
-  z-index: 100;
+  z-index: 400;
   background-image: linear-gradient(
     180deg,
     light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
@@ -615,10 +615,6 @@ button:active, .button-primary:active, .logo:active {
   transition: transform 0.25s ease, opacity 0.25s ease;
 }
 
-.menu-toggle.is-open {
-  opacity: 0;
-}
-
 .menu-overlay {
   position: fixed;
   inset: 0;
@@ -633,7 +629,10 @@ button:active, .button-primary:active, .logo:active {
 
 .mobile-menu {
   position: fixed;
-  inset: auto 1rem 1rem 1rem;
+  top: 6.5rem;
+  right: 1rem;
+  bottom: 1rem;
+  left: 1rem;
   width: auto;
   max-width: 24rem;
   margin-inline: auto;
@@ -651,13 +650,6 @@ button:active, .button-primary:active, .logo:active {
   z-index: 300;
 }
 
-.mobile-menu__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
 .mobile-menu ul {
   display: grid;
   gap: 0.5rem;