font loading and colours fixed

src/components/Header.tsx

@@ -6,7 +6,7 @@ import logo from "@/assets/images/logo.svg?url";
 export default function Header() {
 	return (
 		<header>
-			<nav className="w-full max-w-screen-2xl place-self-center p-8 text-neutral">
+			<nav className="w-full max-w-screen-2xl place-self-center p-8">
 				<div className="container mx-auto flex items-center justify-between">
 					<div className="flex items-center">
 						<Link to="/" className="flex flex-row items-center justify-center">
@@ -17,7 +17,7 @@ export default function Header() {
 								height={50}
 								className="mr-4"
 							/>
-							<span className="hidden text-2xl font-extrabold text-primary sm:block">
+							<span className="nav-title hidden text-2xl font-extrabold sm:block">
 								ChessScribe
 							</span>
 						</Link>
@@ -26,19 +26,13 @@ export default function Header() {
 					<div>
 						<ul className="flex flex-1 items-center gap-14 font-semibold">
 							<li>
-								<Link
-									to="/chessboard"
-									className="decoration-2 underline-offset-8 hover:text-primary hover:underline"
-								>
+								<Link to="/chessboard" className="nav-item">
 									Chessboard
 								</Link>
 							</li>
 
 							<li>
-								<Link
-									to="/contact"
-									className="decoration-2 underline-offset-8 hover:text-primary hover:underline"
-								>
+								<Link to="/contact" className="nav-item">
 									Contact
 								</Link>
 							</li>