fix most remaining issues

src/lib/Card/Link.svelte

@@ -12,11 +12,13 @@
 	.email,
 	.picture,
 	.pgp {
-		background-color: var(--tertiary);
-		color: #fff !important;
+		background-color: var(--alt);
+		color: var(--alt-text);
 		font-size: 20px;
 		height: 23px;
 		transition: all 0.25s;
+		display: flex;
+		align-items: center;
 	}
 
 	.web:hover,
@@ -24,28 +26,34 @@
 	.picture:hover,
 	.pgp:hover {
 		background-color: var(--accent);
-		color: #333 !important;
+		color: var(--alt);
 	}
 
 	.matrixcolored {
-		background-color: #333;
-		color: #fff !important;
+		background-color: var(--alt);
+		color: var(--alt-text);
 		font-size: 20px;
 		height: 23px;
+		display: flex;
+		align-items: center;
 	}
 
 	.discordcolored {
 		background-color: #5865f2;
-		color: #fff !important;
+		color: #fff;
 		font-size: 20px;
 		height: 23px;
+		display: flex;
+		align-items: center;
 	}
 
 	.githubcolored {
 		background-color: #333;
-		color: #fff !important;
+		color: #fff;
 		font-size: 20px;
 		height: 23px;
+		display: flex;
+		align-items: center;
 	}
 
 	a {

src/lib/ContactForm.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import IconLock from "~icons/fa6-solid/lock";
-	import IconInfo from "~icons/fa6-solid/circle-info";
 	import HCaptcha from "svelte-hcaptcha";
 	let submit = false;
 
@@ -15,7 +13,7 @@
 	id="contact-form"
 >
 	<div class="note">
-		<IconLock />
+		<div class="i-fa6-solid:lock"></div>
 		<b>Your IP will be logged for anti-abuse measures.</b>
 	</div>
 	<div class="meta">
@@ -44,12 +42,11 @@
 		placeholder="Your message"
 	/>
 	<div class="note">
-		<IconInfo />
+		<div class="i-fa6-solid:circle-info"></div>
 		<b>The submit button will be visible when you complete the Captcha.</b>
 	</div>
 	<HCaptcha
 		sitekey="67e84266-980c-4050-8a39-142a91928fe8"
-		theme="dark"
 		on:success={showSubmitButton}
 	/>
 	{#if submit}
@@ -99,7 +96,7 @@
 	}
 
 	.form-textbox {
-		background-color: var(--tertiary);
+		background-color: var(--secondary);
 		color: var(--text);
 		border-radius: 10px;
 		border: none;
@@ -109,7 +106,7 @@
 	}
 
 	.button {
-		background-color: var(--tertiary);
+		background-color: var(--secondary);
 		border: none;
 		border-radius: 10px;
 		padding: 0.5rem;

src/lib/Nav.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import IconBars from "~icons/fa6-solid/bars";
-	import IconMatrix from "~icons/simple-icons/matrix";
-	import IconGitHub from "~icons/simple-icons/github";
 	import ThemeToggle from "./ThemeToggle.svelte";
 	import { page } from "$app/stores";
 
@@ -30,8 +27,7 @@
 
 	<input type="checkbox" id="toggle-menu" />
 	<label class="menu-icon" for="toggle-menu">
-		<div id="menu-icon">
-			<IconBars />
+		<div id="menu-icon" class="i-fa6-solid:bars">
 		</div>
 	</label>
 
@@ -46,10 +42,10 @@
 			>
 		{/each}
 		<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/">
-			<IconMatrix />
+			<div class="i-simple-icons:matrix"></div>
 		</a>
 		<a href="https://github.com/ProjectSegfault/">
-			<IconGitHub />
+			<div class="i-simple-icons:github"></div>
 		</a>
 		<div>
 			<ThemeToggle />

src/lib/ThemeToggle.svelte

@@ -2,8 +2,6 @@
 	import { afterUpdate } from "svelte";
 	import DarkMode from "svelte-dark-mode";
 	import type { Theme } from "svelte-dark-mode/types/DarkMode.svelte";
-	import IconSun from "~icons/fa6-solid/sun";
-	import IconMoon from "~icons/fa6-solid/moon";
 
 	let theme: Theme;
 
@@ -19,12 +17,10 @@
 <DarkMode bind:theme />
 
 {#if theme === "dark"}
-	<div on:click={toggle}>
-		<IconSun />
+	<div on:click={toggle} class="i-fa6-solid:sun">
 	</div>
 {:else if theme === "light"}
-	<div on:click={toggle}>
-		<IconMoon />
+	<div on:click={toggle} class="i-fa6-solid:moon">
 	</div>
 {/if}
 

src/lib/app.css

@@ -14,6 +14,8 @@ html {
 	--tertiary: #353535;
 	--text: #ffffffde;
 	--grey: #5454547a;
+	--alt: #333;
+	--alt-text: #ddd
 }
 
 html.light {
@@ -22,6 +24,8 @@ html.light {
 	--tertiary: #939393;
 	--text: #444444;
 	--grey: #444444;
+	--alt: #ddd;
+	--alt-text: #333;
 }
 
 body {