Make nav sticky while scrolling

src/components/Header.astro

@@ -10,6 +10,7 @@ import { SITE_TITLE } from "../config";
 			<h2>a blog, or whatever</h2>
 		</div>
 	</div>
+</header>
 <nav>
 	<HeaderLink href="/">home</HeaderLink>
 	<HeaderLink href="/posts">posts</HeaderLink>
@@ -18,11 +19,7 @@ import { SITE_TITLE } from "../config";
 		>newsletter
 	</HeaderLink>
 </nav>
-</header>
 <style>
-	header {
-		margin: 0em 0 2em;
-	}
 	h2 {
 		margin: 0.5em 0;
 	}

src/style/global.css

@@ -54,14 +54,25 @@ button.dark-mode button {
 	background: var(--black);
 	color: var(--white);
 }
+body.dark-mode nav {
+	background: rgba(0, 0, 0, 0.8);
+}
+
+header {
+	position: relative;
+}
 
 a {
 	color: var(--pink);
 }
 
 nav {
+	position: sticky;
+	top: 0;
 	text-align: center;
+	background: rgba(255, 255, 255, 0.8);
 }
+
 nav a {
 	margin: 25px 0;
 }
@@ -74,12 +85,9 @@ hr {
 	margin: 1rem 0;
 }
 
-ul {
+ul.posts-list,
+ul.tags-list {
 	padding: unset;
-}
-
-.posts-list,
-.tags-list {
 	list-style-type: none;
 }