fixed errors and made text bigger on mobile

blog/src/components/Header.astro

@@ -7,8 +7,8 @@ import Logo from "./Logo.astro";
 
   <nav>
     <div class="nav-left">
-      <Logo id="side-nav-logo" />
-      <a class="" href="/">Startseite</a>
+      <Logo />
+      <a href="/">Startseite</a>
     </div>
     <div class="nav-right">
       <a href="/impressum" style="#789">Impressum</a>
@@ -43,11 +43,10 @@ import Logo from "./Logo.astro";
   nav {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     flex: 1;
   }
 
-  .nav-left,
   .nav-right {
     display: flex;
     align-items: center;
@@ -62,11 +61,15 @@ import Logo from "./Logo.astro";
   #menu-toggle,
   .menu-icon,
   .menu-backdrop,
-  #side-nav-logo {
+  .nav-left {
     display: none;
   }
 
   @media only screen and (max-width: 800px) {
+    * {
+      font-size: 1.2rem;
+    }
+
     .menu-icon {
       display: block;
       position: relative;
@@ -81,13 +84,18 @@ import Logo from "./Logo.astro";
       pointer-events: none;
     }
 
+    .mobile-nav {
+      display: block;
+    }
+
     nav {
       position: fixed;
       top: 0;
       left: 0;
       width: 66vw;
+      min-width: 320px;
       height: 100vh;
-      padding: 32px;
+      padding: 32px 0 0 32px;
       background: var(--primary-color);
 
       display: flex;
@@ -97,7 +105,7 @@ import Logo from "./Logo.astro";
 
       transform: translateX(-100%);
       transition: transform 0.3s ease;
-      z-index: 3;
+      z-index: 10;
 
       a {
         color: whitesmoke;
@@ -106,6 +114,7 @@ import Logo from "./Logo.astro";
 
     .nav-left,
     .nav-right {
+      display: flex;
       flex-direction: column;
       align-items: flex-start;
     }
@@ -133,7 +142,7 @@ import Logo from "./Logo.astro";
       transition:
         opacity 0.3s ease,
         visibility 0.3s ease;
-      z-index: 2;
+      z-index: 9;
     }
 
     #menu-toggle:checked ~ .menu-backdrop {