improve the css

i made the font sizes based off rem instead of px.

src/pages/friends.astro

@@ -7,7 +7,9 @@ const { Content } = await shoutouts.render();
 ---
 
 <Layout title="fries gay friends">
-	<main aria-label="a place where i shoutout my friends sites.">
-		<Content />
+	<main>
+		<section aria-label="a place where i shoutout my friends sites.">
+			<Content />
+		</section>
 	</main>
 </Layout>

src/styles/global.css

@@ -17,22 +17,42 @@
 body {
 	font-family: "Atkinson Hyperlegible", sans-serif;
 	text-align: center;
+	font-size: 1.375rem;
 }
 
-section,
-footer {
+footer,
+main {
 	max-width: 600px;
 	margin: auto;
 }
 
-p {
-	font-size: 22px;
+a {
+	font-size: 1.375rem;
+	color: var(--link-color);
 }
 
+h1 {
+	font-size: 3.225rem;
+}
 
-a {
-	font-size: 22px;
-	color: var(--link-color);
+h2 {
+	font-size: 2.825rem;
+} 
+
+h3 {
+	font-size: 2.225rem;
+}
+
+h4 {
+	font-size: 1.665rem;
+}
+
+h5 {
+	font-size: 1.375rem;
+}
+
+h6 {
+	font-size: 1.185rem;
 }
 
 /* don't ask why i'm doing this cursed workaround, but i am. */