Tweak Styles Again

Fresh eyes after holiday have more taste evidently!

src/lib/Hint.svelte

@@ -1,4 +1,4 @@
-<section>
+<section class="overlay">
 	<iconify-icon icon="tabler:bulb" />
 	<div>
 		<slot />
@@ -10,11 +10,7 @@
 		display: flex;
 		gap: var(--padding);
 		align-items: center;
-		background: var(--overlay);
-		backdrop-filter: blur(var(--radius));
-		border-radius: var(--radius);
 		padding: var(--padding-small);
-		box-shadow: 0 0 var(--radius) var(--shadow);
 	}
 	iconify-icon {
 		color: orange;

src/lib/Item.svelte

@@ -10,7 +10,7 @@
 	}
 </script>
 
-<article on:click={click} on:keypress={click} class:selected>
+<article on:click={click} on:keypress={click} class="overlay" class:overlay-selected={selected}>
 	<header>
 		<slot name="header" />
 	</header>
@@ -20,16 +20,6 @@
 </article>
 
 <style>
-	article {
-		cursor: pointer;
-		border-radius: var(--radius);
-		background-color: var(--overlay);
-		backdrop-filter: blur(var(--radius));
-		box-shadow: 0 0 var(--radius) var(--shadow);
-	}
-	article.selected {
-		background-color: var(--overlay-highlight);
-	}
 	header {
 		transition: all 0.3s ease-in-out;
 		padding: var(--padding);

src/routes/+page.svelte

@@ -519,6 +519,18 @@
 		color: var(--mid-grey);
 	}
 
+	:global(.overlay) {
+		border-radius: var(--radius);
+		background-color: var(--overlay);
+		backdrop-filter: blur(var(--radius));
+		box-shadow: 0 0 var(--radius) var(--shadow);
+		border: 1px solid var(--border);
+	}
+
+	:global(.overlay-selected) {
+		background-color: var(--overlay-highlight);
+	}
+
 	/* Desktop overrides */
 	@media only screen and (min-width: 720px) {
 		:global(dl) {
@@ -545,10 +557,10 @@
 	/* Color preference overrides */
 	@media (prefers-color-scheme: dark) {
 		:global(:root) {
-			--overlay: rgba(40, 40, 40, 0.5);
+			--overlay: rgba(25, 25, 25, 0.5);
 			--overlay-highlight: rgba(23, 33, 36, 0.8);
 			--background: rgb(7, 18, 21);
-			--border: rgb(80, 80, 80);
+			--border: rgb(35, 35, 35);
 			--shadow: rgba(0, 0, 0, 0.6);
 		}
 		:global(body) {