no pointer events on header div

static/main.css

@@ -12,9 +12,9 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    sans-serif;
+    "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
@@ -79,6 +79,7 @@ h3 {
 }
 
 header {
+  pointer-events: none;
   display: grid;
   grid-template:
     "logo . nav        nav"
@@ -87,6 +88,10 @@ header {
     minmax(min-content, 25vw) 1fr auto minmax(0, min-content);
   overflow: hidden;
 
+  * {
+    pointer-events: initial;
+  }
+
   #logo {
     grid-area: logo;
   }
@@ -139,7 +144,8 @@ header {
   }
 
   nav {
-    transition: max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
+    transition:
+      max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
       margin 0.2s cubic-bezier(0.86, 0, 0.07, 1);
     overflow-y: hidden;
     height: auto;
@@ -241,7 +247,9 @@ nav {
     margin-bottom: 0.4em;
     text-transform: uppercase;
     text-decoration: underline 0.15em var(--main-text-color);
-    transition: text-decoration-color 0.3s, color 0.25s;
+    transition:
+      text-decoration-color 0.3s,
+      color 0.25s;
 
     &:focus,
     &:hover {