adjust styling to contain overflowing text

grid column height needed changed from 100vh to
100%

src/components/Header.astro

@@ -12,7 +12,7 @@ const biPridePurple = "#9b4f96";
 const biPrideBlue =  "#0038a8";
 ---
 
-<header>
+<header id="top">
 	<span class="logo">
 		{pageTitle} <Image class="header-heart" src={redHeartFlat} alt="a red heart meant to symbolize love" />
 	</span>

src/components/Navigation.astro

@@ -30,6 +30,11 @@ const transPrideWhite = "#ffffff";
         <li><a href="/site/guestbook">guestbook</a></li>
 		<li>changelog</li>
 	</ul>
+
+    <h3>controls</h3>
+    <ul>
+        <li><a href="#top">top of page</a></li>
+    </ul>
 </nav>
 
 <style define:vars={{backgroundColor, backgroundColorNightMode, transPrideBlue, transPridePink, transPrideWhite}}>

src/styles/global.css

@@ -29,10 +29,9 @@ body {
   background-image: url("/sakura.webp");
   display: grid;
   grid-template-columns: 25vw 75vw;
-  grid-template-rows: 10vh 100vh 10vh;
+  grid-template-rows: 10vh 100% 10vh;
   row-gap: 5vh;
   column-gap: 2vw;
-
   color: var(--text-color);
 }
 
@@ -52,12 +51,10 @@ details {
 main {
   background-color: var(--background-color);
   border-radius: 25px;
-  height: auto;
   width: 60vw;
-  padding-left: 2.5rem;
-  padding-bottom: 0.5rem;
   font-family: system-ui;
-  letter-spacing: 0.05rem;
+  letter-spacing: 0.1rem;
+  line-height: 1.75rem;
   grid-column: 2/3;
   grid-row: 2/3;
   padding-top: 0.5rem;
@@ -65,6 +62,7 @@ main {
 
 section {
   width: 55vw;
+  padding: 2rem;
 }
 
 /* .mobile-header {