Margin and variables stuff

sass/_comments.scss

@@ -296,7 +296,7 @@
 
 			main {
 				grid-area: post;
-				margin-block-start: 1rem;
+				margin: 1rem 0 0;
 				width: 100%;
 
 				:first-child {

sass/_crt.scss

@@ -1,10 +1,6 @@
 .crt {
 	margin: 1rem 0 1rem;
-	box-shadow:
-		var(--edge-highlight),
-		0 0 0 0.0625rem var(--accent-color-alpha),
-		0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
-		0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
+	box-shadow: var(--edge-highlight), var(--shadow-glow);
 	border-radius: var(--rounded-corner);
 	background-image: radial-gradient(
 		color-mix(in srgb, var(--accent-color) 30%, black),

sass/_footer.scss

@@ -1,6 +1,5 @@
 #site-footer {
-	margin-block-start: 4rem;
-	padding: 2rem 0;
+	margin-block-end: 2rem;
 	text-align: center;
 
 	nav {
@@ -70,7 +69,7 @@
 		flex-wrap: wrap;
 		justify-content: center;
 		gap: 0.5rem;
-		margin-block-start: 1rem;
+		margin: 1rem auto 0;
 		padding: 0;
 
 		li {

sass/_general.scss

@@ -30,15 +30,13 @@ body {
 
 // Make focused anchor not get covered by nav,
 // and flash it with accent color when jumping to it
-:target:not(#main) {
+:target:not(#main-content) {
 	transition:
 		all var(--transition),
 		scroll-margin-block-start 0s;
 	scroll-margin-block-start: 15vh;
 	color: var(--accent-color);
-	text-shadow:
-		var(--accent-color-alpha) 0 0 0.25rem,
-		var(--accent-color) 0 0 0.75rem;
+	text-shadow: var(--text-shadow-glow);
 }
 
 // Custom focus indicator
@@ -64,8 +62,8 @@ body {
 	}
 }
 
-.container {
-	margin: 4.25rem auto 0;
+main {
+	margin: 4.25rem auto 4rem;
 	width: min(var(--container-width), 90%);
 }
 

sass/_nav.scss

@@ -58,7 +58,6 @@
 
 #site-nav {
 	position: sticky;
-	left: 50%;
 	z-index: 999;
 	margin: 1rem auto 0;
 	inset-block-start: 1rem;
@@ -82,7 +81,7 @@
 	nav {
 		padding: 0.5rem;
 
-		#main-content {
+		& > a {
 			-webkit-backdrop-filter: var(--blur);
 			position: absolute;
 			left: 50%;

sass/_variables.scss

@@ -18,6 +18,7 @@
 	@if $theme == "dark" {
 		// COLORS
 		--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
+		--bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
 		--fg-color: rgb(255 255 255);
 		--fg-contrast: rgb(0 0 0 / 0.8);
 		--fg-muted-1: rgb(255 255 255 / 0.05);
@@ -34,9 +35,12 @@
 		--yellow-fg: rgb(248 228 92);
 
 		color-scheme: dark;
-	} @else {
+	}
+
+	@else {
 		// COLORS
 		--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
+		--bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
 		--fg-color: rgb(0 0 0 / 0.8);
 		--fg-contrast: rgb(255 255 255);
 		--fg-muted-1: rgb(0 0 0 / 0.05);
@@ -45,9 +49,7 @@
 		--fg-muted-4: rgb(0 0 0 / 0.5);
 		--fg-muted-5: rgb(0 0 0 / 0.6);
 		--glass-bg: rgb(242 242 242 / 0.7);
-		--accent-color-alpha: rgb(
-			from var(--accent-color) r g b / var(--color-opacity)
-		);
+		--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
 		--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
 		--blue-fg: rgb(53 132 228);
 		--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
@@ -139,6 +141,11 @@
 			0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
 			0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
 		--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
+		--shadow-glow: 0 0 0 0.0625rem var(--accent-color-alpha),
+			0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
+			0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
+		--text-shadow-glow: var(--accent-color-alpha) 0 0 0.25rem,
+			var(--accent-color) 0 0 0.75rem;
 
 		// STATES
 		--hover: scale(1.1);