diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index bb10e90..cfb2d91 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -9,7 +9,6 @@
 	#nav-container {
 		display: flex;
 		flex-direction: row;
-		font-size: 20px;
 		justify-content: center;
 		flex-wrap: wrap;
 		gap: 20px;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 97053cc..494f2c1 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -20,9 +20,9 @@ import "../styles/global.css";
 	</head>
 	<body>
 		<Navigation />
-		<hr>
+		<hr aria-hidden="true">
 		<slot />
-		<hr>
+		<hr aria-hidden="true">
 		<Footer />
 	</body>
 </html>
diff --git a/src/styles/global.css b/src/styles/global.css
index 8940551..33cc5e9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -14,45 +14,50 @@
 	}
 }
 
+:root {
+	--h1-font-size: 3.225rem;
+	--h2-font-size: 2.825rem;
+	--h3-font-size: 2.225rem;
+	--h4-font-size: 1.665rem;
+	--default-font-size: 1.375rem;
+	--h6-font-size: 1.185rem;
+}
+
 body {
 	font-family: "Atkinson Hyperlegible", sans-serif;
 	text-align: center;
-	font-size: 1.375rem;
-}
-
-footer,
-main {
+	font-size: var(--default-font-size);
 	max-width: 600px;
 	margin: auto;
 }
 
 a {
-	font-size: 1.375rem;
+	font-size: var(--default-font-size);
 	color: var(--link-color);
 }
 
 h1 {
-	font-size: 3.225rem;
+	font-size: var(--h1-font-size);
 }
 
 h2 {
-	font-size: 2.825rem;
+	font-size: var(--h2-font-size);
 } 
 
 h3 {
-	font-size: 2.225rem;
+	font-size: var(--h3-font-size);
 }
 
 h4 {
-	font-size: 1.665rem;
+	font-size: var(--h4-font-size);
 }
 
 h5 {
-	font-size: 1.375rem;
+	font-size: var(--default-font-size);
 }
 
 h6 {
-	font-size: 1.185rem;
+	font-size: var(--h6-font-size);
 }
 
 /* don't ask why i'm doing this cursed workaround, but i am. */
@@ -76,5 +81,4 @@ hr {
 
 hr {
 	border: 1px solid;
-	max-width: 600px;
 }
