skip link

styles/main.css

@@ -26,6 +26,7 @@ body {
 main {
   width: 65%;
   margin: 0 auto 2rem;
+  scroll-margin-top: 1.5rem;
 }
 
 @media (max-width: 650px) {

styles/nav.css

@@ -1,5 +1,6 @@
 nav {
   display: flex;
+  position: relative;
   gap: 1rem;
   justify-content: center;
   margin: 1rem auto;
@@ -8,16 +9,18 @@ nav {
 nav a,
 nav button {
   font-size: 1.4rem;
-  border: 1px solid;
+  border: .1rem solid;
   border-radius: .15rem;
   padding: .15rem .3rem;
   color: var(--color-accent);
   text-decoration: none;
   line-height: 2rem;
+  outline-offset: .1rem;
 }
 
 @media (max-width: 650px) {
-  nav a {
+  nav a,
+  nav button {
     font-size: 1.1rem;
   }
 }
@@ -33,10 +36,26 @@ nav button {
 
 nav a:focus-visible,
 nav button:focus-visible {
-  outline: none;
-  color: var(--color-bg);
-  background-color: var(--color-accent);
-  border-color: var(--color-accent);
+  outline: .1rem solid var(--color-accent);
+}
+
+#skip {
+	left: -999px;
+  position: absolute;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	z-index: -99;
+  background-color: var(--color-bg);
+}
+
+#skip:focus-visible {
+	left: 1rem;
+	width: auto;
+	height: auto;
+	overflow: auto;
+	z-index: 999;
 }
 
 #current-page {
@@ -50,7 +69,7 @@ nav ul {
   position: absolute;
   z-index: 1;
   margin: 0 0 0 1rem;
-  min-width: 8rem;
+  min-width: 10rem;
 }
 
 #dropdown {
@@ -64,7 +83,7 @@ nav ul.show {
 }
 
 nav ul li {
-  margin: .25rem;
+  margin: .5rem;
 }
 
 nav ul a {