diff --git a/index.html b/index.html
index f946c90..b372d66 100644
--- a/index.html
+++ b/index.html
@@ -20,16 +20,16 @@
 <body>
 
 <!-- simple introduction -->
-<div class="terminal">
+<div id="sneexy" class="terminal">
     <!-- theres probably a much better way to do this instead of manually
         having to use everything like *this*. maybe figure out how to do it all
     without needing to use everything in a div so we can only just use <p class="term-title"> or something -->
     <div class="term-titlebar">
         <img src="./assets/terminal.svg">
-        <p>~/sneexy</p>
+        <p><a href="#sneexy">~/sneexy</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
-    <article id="sneexy">
+    <article>
         <img src="./assets/me.png" onmouseover="this.src='./assets/petpet_flip.gif'" onmouseout="this.src='./assets/me.png'" alt="Crudely drawn picture of a synth character, looking derpy and staring at the viewer with a large green eye. Their body is mostly colored with shades of grey and accents of green." title="Crudely drawn picture of a synth character, looking derpy and staring at the viewer with a large green eye. Their body is mostly colored with shades of grey and accents of green.">
         <h1>hey, i'm <span class="rainbow">ruben!</span></h1>
         <small>cheesed to meet ya.</small>
@@ -38,14 +38,14 @@
 </div>
 
 <!-- about me -->
-<div class="terminal">
+<div id="about-me" class="terminal">
     <div class="term-titlebar">
         <img src="./assets/terminal.svg">
-        <p>~/about-me</p>
+        <p><a href="#about-me">~/about-me</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
-    <article id="about-me">
-        <h1>about me</h1>
+    <article>
+        <h1><a href="#about-me">about me</a></h1>
         <p>i'm your "average" 17 year old <span class="rainbow">gay</span> foss enjoyer.</p>
         <p>i enjoy messing around with technology, unique and retro, or when it's not being stupid and ruined by "modernity" or corporations.</p>
         <p>i'm a nerd into <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software" target="_blank">free and open source</a> software and privacy stuff, along with other libre things. i'm not a programmer or anything, though.</p>
@@ -58,14 +58,14 @@
 </div>
 
 <!-- "fun" facts -->
-<div class="terminal">
+<div id="fun-facts" class="terminal">
     <div class="term-titlebar">
         <img src="./assets/terminal.svg">
-        <p>~/fun-facts</p>
+        <p><a href="#fun-facts">~/fun-facts</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
-    <article id="about-me">
-        <h1>"fun" facts</h1>
+    <article>
+        <h1><a href="#fun-facts">"fun" facts</a></h1>
         <ul>
             <li>my profile pictures used to be random characters from different types of media that i would just grayscaled. ever since then, i realized that i've very much enjoyed being a <a href="https://synthspecies.com/" target="_blank">synth</a> instead.</li>
             <li>i used to have a joke where i loved cheese, in a "i cannot live with cheese, give me the cheese or i die" way. technically the joke does still exist to some extent in a friend group, but otherwise has mostly died out. 🧀</li>
@@ -78,14 +78,14 @@
 </div>
 
 <!-- buttons -->
-<div class="terminal">
+<div id="buttons" class="terminal">
     <div class="term-titlebar">
         <img src="./assets/terminal.svg">
-        <p>~/buttons</p>
+        <p><a href="#buttons">~/buttons</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
-    <article id="buttons">
-        <h1>buttons</h1>
+    <article>
+        <h1><a href="#buttons">buttons</a></h1>
         <p>fun little 88x31 buttons! all goes to awesome friends and some cool websites! <small>friends listed alphabetically. <span style="color: var(--red);">if any are broken and/or missing, poke me.</span> <span style="color: var(--green);">last 2 friend buttons are mine! please hotlink whichever you like!</span></small></p>
         <div class="buttons">
             <!--
@@ -137,7 +137,7 @@
 
 <!-- webrings and credits -->
 <footer>
-    <div class="terminal">
+    <div id="webring-credits" class="terminal">
         <p><a href="https://git.gay/sneexy/pages" target="_blank">website source</a> (feel free to copy! 💚)</p>
         <p><a href="https://catppuccin.com" target="_blank">Catppuccin</a> <a href="https://raw.githubusercontent.com/catppuccin/catppuccin/main/LICENSE" target="_blank">license</a> 💜</p>
         <p><a href="https://www.jetbrains.com/lp/mono" target="_blank">JBM</a> <a href="./assets/fonts/JetBrainsMono/OFL.txt" target="_blank">license</a>/<a href="./assets/fonts/JetBrainsMono/AUTHORS.txt" target="_blank">authors</a></p>
diff --git a/style.css b/style.css
index 8d27b43..c326537 100644
--- a/style.css
+++ b/style.css
@@ -183,9 +183,12 @@ styling of the terminal windows
         }
         
         /* title text */
-        p {
+        p, a {
             font-family: "Lexend Deca";
             font-size: 16px;
+
+            color: var(--text);
+            text-decoration: none;
             
             grid-column: 2;
         }
@@ -273,6 +276,9 @@ styling of the terminal windows
 
     transition: .2s border-color;
 }
+.terminal > .term-titlebar > p:hover, a:hover {
+    text-decoration: underline;
+}
 
 /*
 text formatting and config stuff
@@ -280,8 +286,10 @@ font-family and <p> is set under .terminal
 */
 
 /* the only headings i use */
-h1 {
+h1, h1 a {
+    color: var(--text);
     font-size: 32px;
+    text-decoration: none;
 }
 h2 {
     font-size: 28px;
@@ -311,6 +319,10 @@ li {
 .rainbow {
     animation: 2s linear infinite rainbow;
 }
+/* heading 1 is also clickable */
+h1 a:hover {
+    text-decoration: underline;
+}
 
 /*
 about me section/terminal
@@ -319,7 +331,7 @@ about me section/terminal
     margin-top: 3.8em;
 }
 
-article#sneexy {
+#sneexy > article {
     img {
         width: 256px;
         height: 256px;
