diff --git a/style.css b/style.css
index a2635fa..1476d48 100644
--- a/style.css
+++ b/style.css
@@ -6,232 +6,246 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap");
 
 :root {
-  --serif-font: "Roboto Serif", serif;
-  --sans-serif-font: "Roboto", sans-serif;
-  --monospace-font: "Roboto Mono", monospace;
+	--serif-font: "Roboto Serif", serif;
+	--sans-serif-font: "Roboto", sans-serif;
+	--monospace-font: "Roboto Mono", monospace;
 
-  --white-10: #ffffff;
-  --white-20: #ebebeb;
-  --white-30: #d6d6d6;
-  --white-40: #c2c2c2;
-  --white-50: #adadad;
+	--white-10: #ffffff;
+	--white-20: #ebebeb;
+	--white-30: #d6d6d6;
+	--white-40: #c2c2c2;
+	--white-50: #adadad;
 
-  --black-10: #525252;
-  --black-20: #3d3d3d;
-  --black-30: #292929;
-  --black-40: #141414;
-  --black-50: #000000;
+	--black-10: #525252;
+	--black-20: #3d3d3d;
+	--black-30: #292929;
+	--black-40: #141414;
+	--black-50: #000000;
 }
 
 :root {
-  --foreground: var(--white-10);
-  --background: var(--black-50);
+	--foreground: var(--white-10);
+	--background: var(--black-50);
 
-  --accent-10: var(--black-10);
-  --accent-20: var(--black-20);
-  --accent-30: var(--black-30);
-  --accent-40: var(--black-40);
-  --accent-50: var(--white-50);
+	--accent-10: var(--black-10);
+	--accent-20: var(--black-20);
+	--accent-30: var(--black-30);
+	--accent-40: var(--black-40);
+	--accent-50: var(--white-50);
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    --foreground: var(--black-50);
-    --background: var(--white-10);
+	:root {
+		--foreground: var(--black-50);
+		--background: var(--white-10);
 
-    --accent-10: var(--white-50);
-    --accent-20: var(--white-40);
-    --accent-30: var(--white-30);
-    --accent-40: var(--white-20);
-    --accent-50: var(--black-10);
-  }
+		--accent-10: var(--white-50);
+		--accent-20: var(--white-40);
+		--accent-30: var(--white-30);
+		--accent-40: var(--white-20);
+		--accent-50: var(--black-10);
+	}
 }
 
 body {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  margin: 0;
-  background: var(--background);
-  padding: 1em;
-  min-height: 100vh;
-  color: var(--foreground);
-  font-family: var(--sans-serif-font);
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+	margin: 0;
+	background: var(--background);
+	padding: 1em;
+	min-height: 100vh;
+	color: var(--foreground);
+	font-family: var(--sans-serif-font);
 }
 
 body>header {
-  position: sticky;
-  top: 0;
-  margin-top: -1em;
-  border-bottom: 0.1em solid var(--accent-50);
-  background: var(--background);
-  padding: 0.5em;
+	position: sticky;
+	top: 0;
+	margin-top: -1em;
+	border-bottom: 0.1em solid var(--accent-50);
+	background: var(--background);
+	padding: 0.5em;
 }
 
 body>header>a {
-  color: var(--foreground);
-  font-weight: 500;
-  font-size: 2em;
-  text-decoration: none;
+	color: var(--foreground);
+	font-weight: 500;
+	font-size: 2em;
+	text-decoration: none;
 
-  &::after {
-    content: "_";
-  }
+	&::after {
+		content: "_";
+	}
 
-  &:hover::after {
-    animation: blink 0.5s alternate infinite;
-  }
+	&:hover::after {
+		animation: blink 0.5s alternate infinite;
+	}
 }
 
 @keyframes blink {
-  to {
-    opacity: 0;
-  }
+	to {
+		opacity: 0;
+	}
 
-  from {
-    opacity: 1;
-  }
+	from {
+		opacity: 1;
+	}
+}
+
+body>header>nav {
+	display: flex;
+	align-items: center;
+}
+
+body>header>nav>a {
+	color: var(--foreground);
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
 }
 
 body>.content {
-  flex: 1;
-  padding: 0.5em;
-  overflow-y: hidden;
+	flex: 1;
+	padding: 0.5em;
+	overflow-y: hidden;
 }
 
 body>.content>main {
-  min-width: auto;
+	min-width: auto;
 }
 
 body>.content>main {
-  min-width: 60ch;
-  max-width: 120ch;
+	min-width: 60ch;
+	max-width: 120ch;
 
-  /* paragraphs */
-  p {
-    margin: 0;
-    color: var(--accent-50);
-  }
+	/* paragraphs */
+	p {
+		margin: 0;
+		color: var(--accent-50);
+	}
 
-  >p {
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-  }
+	>p {
+		margin-block-start: 1em;
+		margin-block-end: 1em;
+	}
 
-  /* headings */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0;
-  }
+	/* headings */
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin: 0;
+	}
 
-  > :is(h1, h2, h3, h4, h5, h6) {
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-  }
+	> :is(h1, h2, h3, h4, h5, h6) {
+		margin-block-start: 1em;
+		margin-block-end: 1em;
+	}
 
-  /* links */
-  a {
-    color: var(--foreground);
-    text-decoration: none;
+	/* links */
+	a {
+		color: var(--foreground);
+		text-decoration: none;
 
-    &:hover {
-      text-decoration: underline;
-    }
-  }
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 
-  /* images */
-  img {
-    border-radius: 0.26em;
-  }
+	/* images */
+	img {
+		border-radius: 0.26em;
+	}
 
-  /* block qutoes */
-  blockquote {
-    display: block;
-    margin: 0;
-    margin-left: 1em;
-    margin-block-start: 1em;
-    border-left: 0.2em solid var(--accent-40);
-    padding-left: 0.5em;
-  }
+	/* block qutoes */
+	blockquote {
+		display: block;
+		margin: 0;
+		margin-left: 1em;
+		margin-block-start: 1em;
+		border-left: 0.2em solid var(--accent-40);
+		padding-left: 0.5em;
+	}
 
-  /* lists */
-  ul,
-  ol {
-    margin: 0;
-    padding-left: 2em;
-    color: var(--accent-50);
+	/* lists */
+	ul,
+	ol {
+		margin: 0;
+		padding-left: 2em;
+		color: var(--accent-50);
 
-    li {
-      margin: 0;
-    }
+		li {
+			margin: 0;
+		}
 
-    li::marker {
-      color: var(--foreground);
-    }
-  }
+		li::marker {
+			color: var(--foreground);
+		}
+	}
 
-  > :is(ul, ol) {
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-  }
+	> :is(ul, ol) {
+		margin-block-start: 1em;
+		margin-block-end: 1em;
+	}
 
-  /* horizontal rule */
-  hr {
-    margin: 1em 0;
-    border: none;
-    border-bottom: 0.1em solid var(--accent-50);
-  }
+	/* horizontal rule */
+	hr {
+		margin: 1em 0;
+		border: none;
+		border-bottom: 0.1em solid var(--accent-50);
+	}
 
-  /* inline code */
-  p>code {
-    display: inline-block;
-    border-radius: 0.23em;
-    background: var(--accent-40);
-    padding: 0.2em;
-    color: var(--foreground);
-    font-size: 0.8em;
-    line-height: 1;
-    font-family: var(--monospace-font);
-  }
+	/* inline code */
+	p>code {
+		display: inline-block;
+		border-radius: 0.23em;
+		background: var(--accent-40);
+		padding: 0.2em;
+		color: var(--foreground);
+		font-size: 0.8em;
+		line-height: 1;
+		font-family: var(--monospace-font);
+	}
 
-  /* code blocks */
-  pre {
-    display: block;
-    margin: 1em 0;
-    border-radius: 0.26em;
-    background: var(--accent-40);
-    padding: 0.8em;
-    width: fit-content;
-    overflow: hidden;
-  }
+	/* code blocks */
+	pre {
+		display: block;
+		margin: 1em 0;
+		border-radius: 0.26em;
+		background: var(--accent-40);
+		padding: 0.8em;
+		width: fit-content;
+		overflow: hidden;
+	}
 
-  pre>code {
-    font-size: 0.8em;
-    font-family: var(--monospace-font);
-  }
+	pre>code {
+		font-size: 0.8em;
+		font-family: var(--monospace-font);
+	}
 }
 
 body>footer {
-  padding: 0.5em;
-  color: var(--accent-10);
-  white-space: nowrap;
+	padding: 0.5em;
+	color: var(--accent-10);
+	white-space: nowrap;
 }
 
 body>footer>a {
-  display: inline-block;
-  margin: -0.2em 0;
-  border-radius: 0.23em;
-  background: #42a5f54d;
-  padding: 0.2em;
-  color: #42a5f5;
-  line-height: 1;
-  text-decoration: none;
+	display: inline-block;
+	margin: -0.2em 0;
+	border-radius: 0.23em;
+	background: #42a5f54d;
+	padding: 0.2em;
+	color: #42a5f5;
+	line-height: 1;
+	text-decoration: none;
 
-  &:hover {
-    text-decoration: underline;
-  }
+	&:hover {
+		text-decoration: underline;
+	}
 }