diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index fc4f0b2..f720c34 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -21,11 +21,11 @@ import Webring from '../components/Webring.svelte';
 	</head>
 	<body>
 		<Navigation />
-		<hr>
+		<hr aria-hidden="true">
 		<slot />
 		<hr>
 		<Webring client:load />
-		<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;
 }
