diff --git a/sass/_main-content.scss b/sass/_main-content.scss
new file mode 100644
index 0000000..cb5daf5
--- /dev/null
+++ b/sass/_main-content.scss
@@ -0,0 +1,9 @@
+.main-content {
+  position: absolute;
+  transform: translateY(-200%);
+  transition: var(--transition);
+
+  &:focus {
+    transform: translateY(0);
+  }
+}
diff --git a/sass/_main.scss b/sass/_main.scss
index a09c306..abaec57 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -44,7 +44,7 @@ body {
 
 // Make focused anchor not get covered by nav,
 // and flash it with primary color when jumping to it
-:target {
+:target:not(#main) {
   scroll-margin-top: 15vh;
   animation: var(--transition-long) 1s highlight-in-out;
   color: var(--primary-color);
diff --git a/sass/_nav.scss b/sass/_nav.scss
index 298360b..299f2fc 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -1,89 +1,87 @@
 #site-nav {
   -webkit-backdrop-filter: saturate(180%) blur(10px);
+  align-items: center;
   backdrop-filter: saturate(180%) blur(10px);
   background-color: var(--nav-bg);
   border-radius: 26px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
     0px 12px 24px -16px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   margin: 1rem auto;
+  max-width: min(calc(var(--content-width) + 10rem), 90%);
+  padding: 0.5rem;
   position: sticky;
   top: 1rem;
-  max-width: min(calc(var(--content-width) + 10rem), 90%);
   z-index: 999;
+  width: fit-content;
 
-  nav {
+  ul {
     display: flex;
     flex-wrap: wrap;
+    gap: 0.25rem;
     justify-content: center;
-    align-items: center;
-    padding: 0.5rem;
+    margin: 0;
+    padding: 0;
+  }
 
-    ul {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.25rem;
-      justify-content: center;
-      margin: 0;
-      padding: 0;
+  li {
+    list-style: none;
+    display: inline-flex;
+  }
+
+  a {
+    border-radius: 999px;
+    color: var(--fg-muted-4);
+    padding: 0.325rem 0.75rem;
+    text-decoration: none;
+    transition: var(--transition);
+
+    &:hover {
+      background-color: var(--fg-muted-1);
+      color: var(--primary-color);
+      text-decoration: none;
     }
 
-    li {
-      list-style: none;
-      display: inline-flex;
+    &:active {
+      transform: scale(var(--active));
+    }
+  }
+
+  #home {
+    position: relative;
+    margin-right: 0.625rem;
+
+    &::after {
+      background-color: var(--fg-muted-2);
+      content: "";
+      height: 110%;
+      position: absolute;
+      right: -0.5rem;
+      top: 0;
+      width: 1px;
     }
 
     a {
-      border-radius: 999px;
-      color: var(--fg-muted-4);
-      padding: 0.325rem 0.75rem;
-      text-decoration: none;
-      transition: var(--transition);
+      font-weight: 800;
+      color: var(--fg-muted-5);
 
       &:hover {
-        background-color: var(--fg-muted-1);
         color: var(--primary-color);
-        text-decoration: none;
-      }
-
-      &:active {
-        transform: scale(var(--active));
-      }
-    }
-
-    #home {
-      position: relative;
-      margin-right: 0.625rem;
-
-      &::after {
-        background-color: var(--fg-muted-2);
-        content: "";
-        height: 110%;
-        position: absolute;
-        right: -0.5rem;
-        top: 0;
-        width: 1px;
-      }
-
-      a {
-        font-weight: 800;
-        color: var(--fg-muted-5);
-
-        &:hover {
-          color: var(--primary-color);
-        }
-      }
-    }
-
-    #feed a {
-      padding: 0.325rem 0.625rem;
-
-      svg {
-        vertical-align: -0.125em;
-      }
-
-      span {
-        display: none;
       }
     }
   }
+
+  #feed a {
+    padding: 0.325rem 0.625rem;
+
+    svg {
+      vertical-align: -0.125em;
+    }
+
+    span {
+      display: none;
+    }
+  }
 }
diff --git a/sass/style.scss b/sass/style.scss
index 0d5fd6d..457218e 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -18,6 +18,7 @@
 @use "footer";
 @use "johnvertisement";
 @use "links";
+@use "main-content";
 @use "media";
 @use "nav";
 @use "not-found";
diff --git a/templates/base.html b/templates/base.html
index 0e27669..7925440 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,7 +3,7 @@
 {% include "includes/head.html" ignore missing -%}
 <body>
   {% include "includes/nav.html" ignore missing -%}
-  <div class="container">
+  <div id="main" class="container">
   {% block custom %}{%- endblock -%}
   {% block content %}{%- endblock -%}
   </div>
diff --git a/templates/includes/nav.html b/templates/includes/nav.html
index 8b269a1..266f414 100644
--- a/templates/includes/nav.html
+++ b/templates/includes/nav.html
@@ -1,5 +1,6 @@
-<header id="site-nav">
-  <nav>
+<header>
+  <a href="#main" class="main-content" tabindex="0">Skip to main content</a>
+  <nav id="site-nav">
     <ul>
       <li id="home">
         <a href="{{ get_url(path='') }}">{{ config.title }}</a>