Fix some more styling issues

src/_button.scss

@@ -3,6 +3,7 @@
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
+	gap: 0.25rem;
 	color: $color-text;
 	font-weight: 600;
 	text-decoration: none;
@@ -13,8 +14,8 @@
 	transition: all var(--animation-speed) var(--animation-type);
 	user-select: none;
 
-	:hover,
-	:focus-visible {
+	&:hover,
+	&:focus-visible {
 		opacity: 1;
 		text-decoration-color: unset;
 	}

src/app.scss

@@ -50,7 +50,6 @@ body {
 * {
 	margin: 0;
 	padding: 0;
-	font-weight: normal;
 }
 body {
 	line-height: 1.5;

src/routes/+page.svelte

@@ -12,6 +12,7 @@
 	} from 'phosphor-svelte';
 </script>
 
+<div data-pagefind-body>
 	<picture>
 		<source srcset={Avif} type="image/avif" />
 		<source srcset={WebP} type="image/webp" />
@@ -37,8 +38,8 @@
 
 	<p>
 		My focus is building seamless web applications, and I excel in both front-end and back-end
-	development. My experience includes TypeScript, React, SvelteKit, TailwindCSS, Rust, Docker, SQL,
-	and AWS technologies (DynamoDB, Lambda, EventBridge, and more).
+		development. My experience includes TypeScript, React, SvelteKit, TailwindCSS, Rust, Docker,
+		SQL, and AWS technologies (DynamoDB, Lambda, EventBridge, and more).
 	</p>
 
 	<p>
@@ -46,10 +47,10 @@
 			href="https://github.com/SeriousBug"
 			target="_blank"
 			rel="noreferrer me">Github profile</a
-	>! For a closer look at my work, visit my <a href="/portfolio/">portfolio</a> where I highlight my
-	favorite projects. I sometimes write about the tools I use or challenges I've solved on my
-	<a href="/posts/">blog</a>. I'm always open to feedback, reach out to me through my socials linked
-	below.
+		>! For a closer look at my work, visit my <a href="/portfolio/">portfolio</a> where I highlight
+		my favorite projects. I sometimes write about the tools I use or challenges I've solved on my
+		<a href="/posts/">blog</a>. I'm always open to feedback, reach out to me through my socials
+		linked below.
 	</p>
 
 	<ul class="socials">
@@ -84,6 +85,7 @@
 			</a>
 		</li>
 	</ul>
+</div>
 
 <style lang="scss">
 	@import '../vars';

src/routes/[slug]/+page.svelte

@@ -4,7 +4,7 @@
 	export let data;
 </script>
 
-<article>
+<article data-pagefind-body>
 	<h1>{data.title}</h1>
 	<time datetime={data.date}>
 		{format(new Date(data.date), 'MMMM d, yyyy')}