Fun footer links hover effect, re-nest nav styles

sass/_footer.scss

@@ -21,23 +21,29 @@
 			margin: 0;
 			padding: 0;
 			width: min(calc(var(--container-width) / 1.5), 100%);
-		}
 
 			li {
 				display: flex;
 				line-height: normal;
 				list-style: none;
+
+				&:first-of-type a {
+					border-radius: 1.125rem 0 0 1.125rem;
+				}
+
+				&:last-of-type a {
+					border-radius: 0 1.125rem 1.125rem 0;
 				}
 
 				a {
 					transition: var(--transition);
-			border-radius: 999px;
 					padding: 0.5rem 0.75rem;
 					color: var(--fg-muted-4);
 					text-decoration: none;
 
 					&:hover {
 						box-shadow: var(--edge-highlight);
+						border-radius: 1.125rem;
 						background-color: var(--primary-color);
 						color: var(--fg-color);
 						text-decoration: none;
@@ -48,6 +54,8 @@
 					}
 				}
 			}
+		}
+	}
 
 	#socials {
 		display: flex;

sass/_nav.scss

@@ -13,6 +13,21 @@
 	nav {
 		padding: 0.5rem;
 
+		#main-content {
+			position: absolute;
+			transform: translateY(-100%);
+			opacity: 0;
+			z-index: 999;
+			transition: var(--transition);
+			background: var(--bg-color), var(--primary-color);
+			pointer-events: none;
+
+			&:focus {
+				transform: translateY(0);
+				opacity: 1;
+			}
+		}
+
 		ul {
 			display: flex;
 			flex-wrap: wrap;
@@ -21,16 +36,48 @@
 			gap: 0.25rem;
 			margin: 0;
 			padding: 0;
-		}
 
 			li {
 				display: flex;
 				line-height: normal;
 				list-style: none;
+
+				&#home {
+					position: relative;
+					margin-right: 0.625rem;
+
+					body[dir="rtl"] & {
+						margin-right: unset;
+						margin-left: 0.625rem;
+					}
+
+					&::after {
+						position: absolute;
+						top: -0.125rem;
+						right: -0.5rem;
+						background-color: var(--fg-muted-2);
+						width: 1px;
+						height: calc(100% + 0.25rem);
+						content: "";
+
+						body[dir="rtl"] & {
+							right: unset;
+							left: -0.5rem;
+						}
+					}
+
+					a {
+						color: var(--fg-muted-5);
+						font-weight: 800;
+
+						&:hover {
+							color: var(--primary-color);
+						}
+					}
 				}
 
 				a,
-		#dropdown summary {
+				&#dropdown summary {
 					&:hover {
 						box-shadow: var(--edge-highlight);
 						background-color: var(--fg-muted-1);
@@ -79,57 +126,8 @@
 					}
 				}
 
-		#main-content {
+				&#feed a,
-			position: absolute;
+				&#dropdown summary {
-			transform: translateY(-100%);
-			opacity: 0;
-			z-index: 999;
-			transition: var(--transition);
-			background: var(--bg-color), var(--primary-color);
-			pointer-events: none;
-
-			&:focus {
-				transform: translateY(0);
-				opacity: 1;
-			}
-		}
-
-		#home {
-			position: relative;
-			margin-right: 0.625rem;
-
-			body[dir="rtl"] & {
-				margin-right: unset;
-				margin-left: 0.625rem;
-			}
-
-			&::after {
-				position: absolute;
-				top: -0.125rem;
-				right: -0.5rem;
-				background-color: var(--fg-muted-2);
-				width: 1px;
-				height: calc(100% + 0.25rem);
-				content: "";
-
-				body[dir="rtl"] & {
-					right: unset;
-					left: -0.5rem;
-				}
-			}
-
-			a {
-				color: var(--fg-muted-5);
-				font-weight: 800;
-
-				&:hover {
-					color: var(--primary-color);
-				}
-			}
-		}
-
-		#feed a,
-		#dropdown summary {
 					padding: 0.5rem 0.625rem;
 
 					&:hover .icon {
@@ -149,13 +147,13 @@
 					}
 				}
 
-		#feed .icon {
+				&#feed .icon {
 					$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E");
 					-webkit-mask-image: $icon;
 					mask-image: $icon;
 				}
 
-		#dropdown {
+				&#dropdown {
 					details {
 						position: relative;
 						border-radius: unset;
@@ -218,4 +216,6 @@
 					}
 				}
 			}
+		}
+	}
 }