tidying up stuff i forgot to change

_src/assets/css/citrus/citrus.css

@@ -1,12 +1,16 @@
 @import url("./variables.css");
 @import url("../default/variables.css");
 @import url("./nav.css");
+#bio, #interests, #badges, #artworks, #art {
+	font-family: "Pangolin", sans-serif;
+}
 body {
 	background-attachment: local, fixed;
 	background-color: var(--citrus-primary);
 	background-image: var(--checker),
 		linear-gradient(var(--citrus-primary), var(--citrus-secondary));
 	background-size: 32px, contain;
+	background-blend-mode: overlay, normal;
 }
 body > nav {
 	background-attachment: fixed;
@@ -14,6 +18,7 @@ body > nav {
 	background-image: var(--dot),
 		linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
 	background-size: 6px;
+	background-blend-mode: screen;
 	border-color: var(--citrus-dark);
 	color: var(--citrus-dark);
 	& a,
@@ -44,6 +49,9 @@ body > nav {
 				box-shadow var(--trans);
 		}
 	}
+	& details {
+		background-image: linear-gradient(-45deg, var(--citrus-primary), var(--citrus-secondary), var(--citrus-primary));
+	}
 }
 article {
 	background-color: var(--citrus-light);
@@ -51,24 +59,30 @@ article {
 	background-image: var(--noise);
 	box-shadow: var(--shadow);
 	border: 0;
+	& .header-anchor {
+		border-radius: inherit;
+		background-color: color-mix(in lch, magenta, white);
+		&:is(:hover,:focus) {
+			background-color: magenta;
+		}
+	}
 	& code:not(pre *) {
-		border-radius: 0;
-		color: var(--citrus-primary);
-		background-color: #000;
+		border-radius: inherit;
+		background-color: yellow;
+		box-shadow: 2px 2px 8px 0 color-mix(in lch, yellow, black 10%);
 	}
 }
 /* home.css */
-body[id] > main::before {
-	content: "";
-	height: 100%;
-	width: 100%;
-	display: flex;
-	position: fixed;
-	top: 0;
-	left: 0;
-	image-rendering: pixelated;
-	opacity: 0.1;
-	z-index: -10;
+#interests div:has(img)::after {
+	display: none !important;
+}
+#interests li:has(div img) {
+	margin: var(--pad-sm);
+	box-shadow: var(--shadow);
+	background: color-mix(in lch, yellow, white);
+	&:nth-child(odd) {
+		transform: rotate(1deg)
+	}
 }
 ul:not([role]) li::before {
 	background-color: #000;
@@ -79,10 +93,11 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 /* blog.css */
 #blog {
 	background-color: #fff;
-	background-image: var(--dot-dark);
+	background-image: var(--dot);
 	background-size: 6px;
-	background-attachment: fixed;
+	background-attachment: local;
 	background-repeat: repeat;
+	background-blend-mode: difference;
 	& main {
 		&::before {
 			background-image: var(--bg-sky);
@@ -108,9 +123,12 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 			border-radius: 0;
 		}
 		& pre {
-			border-radius: 0;
-			color: var(--citrus-primary);
-			background-color: #000;
+			border-radius: 4px;
+			color: var(--citrus-secondary);
+			background-color: color-mix(in lch, var(--citrus-secondary), black 90%);
+			background-size: 4px;
+			text-shadow: 2px 2px 0
+				color-mix(in lch, var(--citrus-secondary), black 60%);
 		}
 		& [aria-label="Post warning"] {
 			background-color: var(--citrus-primary);
@@ -123,12 +141,16 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 			);
 			background-color: var(--citrus-primary);
 		}
+		& s {
+			text-decoration-color: #d00;
+		}
 	}
 	& #posts {
 		& a {
 			background-color: #fff;
 			border-color: #fff;
 			border-width: 4px;
+			box-shadow: var(--shadow);
 			transition: border-color var(--trans), color var(--trans);
 			& p {
 				color: initial;
@@ -141,20 +163,9 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 }
 /* gallery.css */
 #gallery {
-	& h2 {
-		font-family: "Pangolin", sans-serif;
-	}
 	& article {
 		border-radius: 0;
 		border: 0;
-		background-image: var(--noise), var(--line);
-		background-color: #fff;
-		padding: 1rem;
-		background-size: auto, 32px;
-	}
-	& article[id] {
-		background-image: var(--noise), var(--paper);
-		background-size: auto, 4px;
 	}
 	& a:has(figure) {
 		transition: border-color var(--trans), background-color var(--trans);
@@ -165,20 +176,51 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 				background-color: currentColor;
 				border-color: currentColor;
 			}
-			& figcaption {
+			& figcaption,
+			time {
 				color: #fff;
 			}
-			& time {
-				color: #fffa;
-			}
 		}
 	}
 	& figure {
 		border-color: #fff;
 		background-color: #fff;
 	}
-	& time {
-		color: #666;
+}
+#artworks {
+	article {
+		margin: var(--pad-xl) 0 0 0;
+		background-color: #fff;
+		background-image: var(--noise), var(--lined);
+		background-size: auto, 32px;
+		&:last-child:not(:first-of-type) {
+			margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0;
+		}
+		&::before {
+			content: "";
+			display: flex;
+			height: 100%;
+			width: calc(100% + var(--pad-xl) * 2);
+			margin: -4rem 0 0 calc(var(--pad-xl) * -1);
+			background-image: var(--border), var(--lined);
+			background-size: 32px, 32px;
+			background-blend-mode: darken;
+			padding: var(--pad-xl);
+		}
+	}
+}
+#art {
+	background-image: var(--noise);
+	& p,
+	time {
+		padding: 0;
+		line-height: 32px;
+	}
+	& img {
+		border-radius: 0;
+	}
+	& figcaption {
+		font-family: "Urbanist", sans-serif;
 	}
 }
 @media screen and (max-width: 920px) {

_src/assets/css/citrus/nav.css

@@ -7,7 +7,4 @@ body > nav {
 		border: 0;
 		margin: 0 0 var(--pad-sm) 0 ;
 	}
-	& details:not([open]) > summary, details[open] {
-		border: 0;
-	}
 }

_src/assets/css/citrus/variables.css

@@ -1,17 +1,16 @@
 :root {
-	--citrus-primary: rgb(255, 190, 0);
-	--citrus-secondary: rgb(255, 110, 0);
-	--citrus-light: rgb(255, 236, 180);
-	--citrus-dark: rgb(105, 50, 0);
+	--citrus-primary: var(--primary);
+	--citrus-secondary: var(--secondary);
+	--citrus-light: color-mix(in lch, var(--citrus-primary), var(--light) 70%);
+	--citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%);
 	--citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary));
 	--shadow: 0.2rem 0.2rem 0.4rem 0.2rem #0003;
 	--checker: url("/assets/img/theme/citrus/checker.png");
-	--checker-dark: url("/assets/img/theme/citrus/checker-dark.png");
 	--dot: url("/assets/img/theme/citrus/dot.png");
-	--dot-dark: url("/assets/img/theme/citrus/dot-dark.png");
-	--line: url("/assets/img/theme/citrus/line.png");
+	--lined: url("/assets/img/theme/citrus/line.png");
 	--paper: url("/assets/img/theme/citrus/paper.png");
 	--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
+	--border: url("/assets/img/theme/citrus/border.png");
 	--bg-sky: url("/assets/img/pkmn/bg/plat_trade1.png");
 	--bg-ilex: url("/assets/img/pkmn/bg/ilex_day.png");
 	--bg-ilex-noon: url("/assets/img/pkmn/bg/ilex_noon.png");

_src/assets/css/default/default.css

@@ -1,5 +1,6 @@
 @import url("./variables.css");
 @import url("./nav.css");
+
 :root {
 	--view: 18rem;
 }
@@ -9,9 +10,11 @@ body {
 	font-size: 100%;
 	margin: 0;
 	padding: 0;
+
 	& a,
 	button {
 		cursor: pointer;
+
 		&:is(:hover, :focus) {
 			outline: 0;
 		}
@@ -24,17 +27,45 @@ main {
 	overflow: hidden;
 }
 
+details {
+	cursor: pointer;
+
+	& summary::marker {
+		content: none;
+	}
+}
+
+h3 {
+	font-size: 2rem;
+}
+
+.header-anchor {
+	display: inline-block;
+	transition: color var(--trans), background-color var(--trans);
+	height: max-content;
+	padding: 0 var(--pad-m);
+	margin: 0 0 0 calc(var(--pad-xl) * -1);
+	border-radius: 0 var(--round) var(--round) 0;
+}
+main article[id] {
+	& p, li {
+		font-size: 1.2rem;
+	}
+}
 article {
 	border-style: solid;
 	border-width: 2px;
 	border-radius: var(--round);
 	height: max-content;
 	padding: var(--pad-xl);
+
 	& a {
 		font-weight: 500;
 	}
+
 	& a:has(figure) {
 		border-radius: var(--round);
+
 		& figure {
 			border-color: inherit;
 		}
@@ -45,15 +76,6 @@ article {
 		text-decoration-thickness: 0.1em;
 	}
 
-	& ul {
-		& li {
-			margin: 0;
-			& p {
-				margin: 0;
-			}
-		}
-	}
-
 	& u {
 		text-decoration-style: double;
 		text-decoration-thickness: 2px;
@@ -66,6 +88,7 @@ article {
 	& p {
 		word-wrap: break-word;
 	}
+
 	& p:not(:last-child, [aria-label]) {
 		padding-bottom: var(--pad-sm);
 	}
@@ -92,18 +115,6 @@ article {
 		font-weight: bold;
 	}
 
-	& h3 {
-		font-size: 1.6rem;
-		margin: 0;
-
-		& a {
-			display: inline-block;
-			transition: color var(--trans), background-color var(--trans);
-			border-radius: inherit;
-			height: max-content;
-			padding: 0 0.4rem;
-		}
-	}
 	& figure {
 		margin: 0;
 		border-style: solid;
@@ -112,29 +123,39 @@ article {
 		border-radius: var(--round);
 		display: flex;
 		flex-direction: column;
+
 		& img {
 			border-radius: inherit;
 		}
 	}
+
 	& section {
 		& a:has(figure) {
-			text-decoration: none;
 			height: max-content;
 		}
+
 		& figure img {
 			border-radius: var(--round);
 		}
+
 		& figcaption {
 			font-weight: normal;
 			font-style: italic;
 			padding-top: var(--pad-sm);
 		}
 	}
+	& h3 code {
+		display: flex;
+		gap: var(--pad-l);
+		width: fit-content;
+		margin: var(--pad-l) 0;
+	}
 }
 
 :is(main article, main section):not(:last-child) {
 	margin-bottom: var(--pad-xl);
 }
+
 img[src*="/assets/img/flag/"] {
 	height: 32px;
 	border-radius: 0.2rem;
@@ -142,24 +163,27 @@ img[src*="/assets/img/flag/"] {
 	border-width: 2px;
 	border-color: #fff;
 }
+
 a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 	transform: translateY(-4px);
 	transition: var(--trans);
 }
+
 @media screen and (max-width: 920px) {
-	body > nav {
+	body>nav {
 		position: initial;
 		width: 100%;
 	}
+
 	main {
 		padding: var(--pad-l);
 	}
 
-	main > section {
+	main>section {
 		flex-direction: column;
 	}
 
-	main > section {
+	main>section {
 		width: initial;
 	}
 
@@ -168,36 +192,42 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 		width: auto;
 	}
 
-	body > nav::before {
+	body>nav::before {
 		content: none;
 	}
 
-	body > nav {
+	body>nav {
 		flex-direction: row;
 		border: 0;
 		width: 100%;
+
 		& details {
 			height: fit-content;
 			width: 100%;
 		}
 	}
+
 	body::after {
 		content: "";
 	}
 }
+
 @media screen and (max-width: 450px) {
 	main {
 		padding: var(--pad-sm);
 	}
+
 	article {
 		padding: var(--pad-l);
 		border: 0;
 	}
-	body > nav {
+
+	body>nav {
 		flex-direction: column;
 		justify-content: start;
+
 		& details[open] {
 			width: 100%;
 		}
 	}
-}
+}

_src/assets/css/default/gallery.css

@@ -1,7 +1,16 @@
 :root {
 	--thumb: 16rem;
 }
+#gallery {
+	& time {
+		display: flex;
+		align-self: center;
+	}
+}
 #artworks {
+	& p {
+		font-size: 1.2rem;
+	}
 	& ul {
 		display: grid;
 		grid-template-columns: repeat(
@@ -11,6 +20,9 @@
 		padding: 0;
 		margin: 0;
 		gap: var(--pad-l);
+		& a {
+			display: block;
+		}
 	}
 
 	& h2 {
@@ -21,27 +33,27 @@
 			margin-top: 0;
 		}
 	}
+	& figure {
+		margin: 0;
+		padding: var(--pad-sm);
+		border-width: 2px;
+		border-style: solid;
+		& img {
+			display: flex;
+			width: 100%;
+			height: var(--thumb);
+			border-bottom: unset;
+			object-fit: contain;
+		}
 
-	& a {
-		display: block;
-		text-decoration: unset;
-		& figure {
-			margin: 0;
-			padding: var(--pad-sm);
-			border-width: 2px;
-			border-style: solid;
-			& img {
-				display: flex;
-				width: 100%;
-				height: var(--thumb);
-				border-bottom: unset;
-				object-fit: contain;
-			}
-
-			& figcaption {
-				font-family: Urbanist, sans-serif;
-				font-size: var(--pad-lm);
-			}
+		& figcaption {
+			font-family: Urbanist, sans-serif;
+			font-size: var(--pad-lm);
+			display: flex;
+			align-items: baseline;
+		}
+		& .count {
+			margin: auto 0 0 auto;
 		}
 	}
 }
@@ -49,8 +61,11 @@
 #art {
 	display: flex;
 	flex-direction: column;
+	width: fit-content;
 	h3 {
 		font-family: "Urbanist", sans-serif;
+		display: flex;
+		gap: var(--pad-sm);
 	}
 	& section:has(a:nth-child(n + 2)) {
 		display: flex;
@@ -58,17 +73,12 @@
 		gap: var(--pad-l);
 	}
 	& section {
-		margin: var(--pad-l) 0;
 		& a {
 			display: flex;
-			width: calc(var(--post) - var(--view));
+			width: calc(var(--post) - var(--view) * 1.2);
 			flex-direction: column;
 		}
 	}
-	& time {
-		display: flex;
-		font-weight: bold;
-	}
 }
 @media screen and (max-width: 1400px) {
 	#art section:has(a:nth-child(n + 2)) {
@@ -85,4 +95,4 @@
 	#art section:has(a:nth-child(n + 2)) {
 		flex-direction: column;
 	}
-}
+}

_src/assets/css/default/home.css

@@ -15,7 +15,38 @@
 		color: transparent;
 	}
 }
-ul:not([role]) li {
+article#bio {
+	& ul {
+		margin: 0 var(--pad-xl);
+	}
+	& span[id] {
+		background-clip: text;
+		background-repeat: repeat;
+		&:hover {
+			background-clip: initial;
+			transition: var(--trans);
+			animation: fadeIn var(--trans) linear forwards;
+		}
+	}
+}
+article#badges {
+	& ul {
+		gap: 1rem;
+		padding: 0;
+		display: flex;
+		flex-wrap: wrap;
+	}
+	& a {
+		display: flex;
+		padding: inherit;
+		margin: 0;
+		background-color: unset;
+	}
+}
+article#bio ul {
+	padding: 0;
+}
+article#bio ul li {
 	&::before {
 		content: "";
 		width: 20px;
@@ -23,12 +54,53 @@ ul:not([role]) li {
 		position: absolute;
 		mask-image: var(--paw);
 		mask-size: contain;
-		margin: 0.4rem 0 0 -2rem;
+		margin: var(--pad-sm) 0 0 calc(var(--pad-xl)*-1);
 	}
 	&::marker {
 		content: none;
 	}
 }
+article#interests ul {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+article#interests {
+	& details ul {
+		margin: 0;
+		padding: var(--pad-l) 0;
+	}
+	& details:last-child ul {
+		padding: var(--pad-l) 0 0 0
+	}
+	& li {
+		display: flex;
+		& a {
+			padding: var(--pad-sm);
+			background: transparent;
+		}
+		& span {
+			display: flex;
+			width: 14ch;
+			text-align: center;
+			justify-content: center;
+		}
+	}
+	& details h3 {
+		border-bottom-width: 1px;
+		border-bottom-style: solid;
+	}
+	& div:has(img) {
+		margin: 0 auto;
+		width: fit-content;
+	}
+	.music img {
+		height: 48px;
+	}
+	.manga img {
+		height: 128px;
+	}
+}
 #pkmn {
 	display: flex;
 	flex-wrap: wrap;
@@ -42,6 +114,7 @@ ul:not([role]) li {
 	border-top-color: #c8f8c0;
 	border-width: 3px;
 	border-style: solid;
+	margin: var(--pad-l) 0 0 0;
 	& img {
 		image-rendering: pixelated;
 		&:hover {
@@ -52,10 +125,6 @@ ul:not([role]) li {
 		}
 	}
 }
-body [id]:not(:nth-child(1)) ul {
-	display: flex;
-	flex-wrap: wrap;
-}
 #agender {
 	background-image: linear-gradient(
 		#000 0 14.28%,
@@ -79,70 +148,7 @@ body [id]:not(:nth-child(1)) ul {
 #pansexual {
 	background-image: linear-gradient(#f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
 }
-#bio,
-#interests {
-	& ul {
-		font-family: "Urbanist", sans-serif;
-		font-size: 1.3rem;
-		margin: 0;
-		display: flex;
-		flex-direction: column;
-	}
-	& p {
-		font-size: 1.1rem;
-		font-family: "Rubik", sans-serif;
-		font-weight: bold;
-	}
-	& span[id] {
-		background-clip: text;
-		background-repeat: repeat;
-		&:hover {
-			background-clip: initial;
-			transition: var(--trans);
-			animation: fadeIn var(--trans) linear forwards;
-		}
-	}
-}
-#collection {
-	& ul {
-		margin: 0;
-		padding: var(--pad-l) 0 0 0;
-	}
-	& li {
-		display: flex;
-		& a {
-			padding: var(--pad-sm);
-			background: transparent;
-			text-decoration: none;
-		}
-		& span {
-			display: flex;
-			width: 14ch;
-			text-align: center;
-			justify-content: center;
-		}
-	}
-	& div:has(img) {
-		margin: 0 auto;
-		width: fit-content;
-	}
-	.music img {
-		height: 48px;
-	}
-}
-#badges {
-	& ul {
-		gap: 1rem;
-		padding: 0;
-	}
-	& a {
-		display: flex;
-		padding: inherit;
-		margin: 0;
-		background-color: unset;
-	}
-}
-#collection div:has(img)::after {
+#interests div:has(img)::after  {
 	content: url("/assets/img/icon/shortcut.png");
 	display: flex;
 	z-index: 1;
@@ -153,7 +159,7 @@ body [id]:not(:nth-child(1)) ul {
 	pointer-events: none;
 }
 @media screen and (max-width: 920px) {
-	#collection {
+	article#interests {
 		display: flex;
 		flex-direction: column;
 		& ul {

_src/assets/css/default/index.css

@@ -3,6 +3,8 @@
 @import url("./theme-dark.css");
 
 #index {
+	color: var(--primary-dark-300);
+	background-color: rgb(255, 190, 0);
 	width: 100%;
 	margin: 0;
 	padding: 0;
@@ -14,7 +16,6 @@
 		width: inherit;
 		flex-direction: column;
 		background-image: var(--sunny);
-		background-color: rgb(255, 190, 0);
 		background-repeat: no-repeat;
 		background-position: center;
 		background-size: contain;

_src/assets/css/default/nav.css

@@ -42,11 +42,7 @@ body > nav {
 		align-self: center;
 	}
 	& details {
-		cursor: pointer;
 		display: flex;
-		& summary::marker {
-			content: none;
-		}
 	}
 	& ul {
 		margin: var(--pad-sm);

_src/assets/css/default/theme-dark.css

@@ -1,8 +1,10 @@
 @media (prefers-color-scheme: dark) {
+	article, body {
+		color: var(--secondary-light-300);
+	}
 	article {
 		border-color: var(--secondary-300);
 		background-color: var(--secondary-200);
-		color: var(--secondary-light-300);
 
 		& aside {
 			box-shadow: inset 0 0 0 2px var(--secondary-500);
@@ -64,7 +66,6 @@
 	/* default.css */
 	body {
 		background-color: var(--secondary-100);
-		color: var(--secondary-light-300);
 		/* this is cursed */
 		& :is(a, button) {
 			color: var(--secondary-light-400);
@@ -75,9 +76,32 @@
 				border-color: currentColor;
 				background-color: var(--secondary-500);
 			}
+			&:is(.header-anchor):is(:hover, :focus)  {
+				background-color: var(--secondary-light-400);
+				color: var(--secondary-300);
+				box-shadow: 0 0 0 2px var(--secondary-300);
+			}
 		}
 		& > nav {
 			border-color: var(--secondary);
+			& details {
+				background-color: var(--secondary-100);
+				&:not([open]) summary {
+					color: var(--secondary);
+				}
+			}
+
+			& details[open] {
+				border-color: var(--secondary);
+				background-color: var(--secondary-300);
+				color: var(--secondary-light-300);
+
+				& a[aria-current] {
+					color: var(--secondary-500);
+					border-color: var(--secondary-light-500);
+					background-color: var(--secondary-light-500);
+				}
+			}
 			&::before,
 			::after {
 				background-color: var(--secondary);
@@ -87,37 +111,13 @@
 		&::after {
 			background-color: var(--secondary);
 		}
-
-		& details {
-			background-color: var(--secondary-100);
-			&:not([open]) summary {
-				color: var(--secondary);
-			}
-		}
-
-		& details[open] {
-			border-color: var(--secondary);
-			background-color: var(--secondary-300);
-			color: var(--secondary-light-300);
-
-			& summary {
-				color: var(--secondary-light-300);
-				background-color: inherit;
-			}
-
-			& a[aria-current] {
-				color: var(--secondary-500);
-				border-color: var(--secondary-light-500);
-				background-color: var(--secondary-light-500);
-			}
-		}
 	}
 	/* home.css */
 	ul:not([role]) li::before {
 		background-color: var(--secondary-light-300);
 	}
-	#collection {
-		& a:is(:hover, :focus) {
+	#interests {
+		& a:is(:hover, :focus):not(.header-anchor) {
 			box-shadow: 0 0 0 1px currentColor;
 			background-color: var(--secondary-500);
 		}
@@ -125,11 +125,14 @@
 			box-shadow: 0 0 0 1px
 				color-mix(in lch, transparent, var(--secondary-500) 70%);
 		}
+		& details h3 {
+			border-color: var(--secondary-600);
+		}
 	}
 	a:has(img[src*="/assets/img/button"]) {
 		background-color: unset;
 		&:is(:hover, :focus) img {
-			filter: drop-shadow(4px 6px 0 var(--primary-500));
+			filter: drop-shadow(4px 6px 0 var(--secondary-500));
 		}
 	}
 }

_src/assets/css/default/theme-light.css

@@ -1,8 +1,10 @@
 @media (prefers-color-scheme: light) {
+	article, body {
+		color: var(--primary-dark-300);
+	}
 	article {
 		border-color: var(--primary-300);
 		background-color: var(--primary-200);
-		color: var(--primary-dark-300);
 
 		& aside {
 			box-shadow: inset 0 0 0 2px var(--primary-500);
@@ -64,7 +66,6 @@
 	/* default.css */
 	body {
 		background-color: var(--primary-100);
-		color: var(--primary-dark-300);
 		/* this is cursed */
 		& :is(a, button) {
 			color: var(--primary-dark-400);
@@ -75,9 +76,32 @@
 				border-color: currentColor;
 				background-color: var(--primary-500);
 			}
+			&:is(.header-anchor):is(:hover, :focus)  {
+				background-color: var(--primary-dark-400);
+				color: var(--primary-300);
+				box-shadow: 0 0 0 2px var(--primary-300);
+			}
 		}
 		& > nav {
 			border-color: var(--primary);
+			& details {
+				background-color: var(--primary-100);
+				&:not([open]) summary {
+					color: var(--primary);
+				}
+			}
+
+			& details[open] {
+				border-color: var(--primary);
+				background-color: var(--primary-300);
+				color: var(--primary-dark-300);
+
+				& a[aria-current] {
+					color: var(--primary-500);
+					border-color: var(--primary-dark-500);
+					background-color: var(--primary-dark-500);
+				}
+			}
 			&::before,
 			&::after {
 				background-color: var(--primary);
@@ -87,36 +111,13 @@
 		&::after {
 			background-color: var(--primary);
 		}
-
-		& details {
-			background-color: var(--primary-100);
-			&:not([open]) summary {
-				color: var(--primary);
-			}
-		}
-
-		& details[open] {
-			border-color: var(--primary);
-			background-color: var(--primary-300);
-			color: var(--primary-dark-300);
-
-			& summary {
-				background-color: inherit;
-			}
-
-			& a[aria-current] {
-				color: var(--primary-500);
-				border-color: var(--primary-dark-500);
-				background-color: var(--primary-dark-500);
-			}
-		}
 	}
 	/* home.css */
 	ul:not([role]) li::before {
 		background-color: var(--primary-dark-300);
 	}
-	#collection {
-		& a:is(:hover, :focus) {
+	#interests {
+		& a:is(:hover, :focus):not(.header-anchor) {
 			box-shadow: 0 0 0 1px currentColor;
 			background-color: var(--primary-500);
 		}
@@ -124,6 +125,9 @@
 			box-shadow: 0 0 0 1px
 				color-mix(in lch, transparent, var(--primary-dark-500) 30%);
 		}
+		& details h3 {
+			border-color: var(--primary-dark-600);
+		}
 	}
 	a:has(img[src*="/assets/img/button"]) {
 		background-color: unset;