add theme song and new logo

fedi-guide/index.html

@@ -94,7 +94,20 @@
         </details>
         <p>if you have feedback, you can contact @sneexy@lea.pet on the fediverse and ask about anything! <i class="ph-bold ph-smiley-wink"></i></p>
         <p>anyways, we'll get started now...</p>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/fedi-guide</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
+    </section>
+</div>
+
+<!-- "fediverse"...?-->
+<div id="fedi-guide" class="terminal">
+    <div aria-hidden="true" class="term-titlebar">
+        <i class="ph-fill ph-terminal"></i>
+        <p><a href="#fedi-guide">"fediverse"...?</a></p>
+        <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
+    </div>
+    <section>
+        <h2><a href="#fediverse-explained">"fediverse"...?</a></h2>
+        <p>to quickly explain what the fediverse is, it's a social network that isn't controlled in one central area, such as tumblr or twitter. it works like email, people can send mail to each other no matter what they use, like gmail, aol, yahoo and whatnot. it's exactly like that, there's many different softwares and websites that all connect to each other to make a universal network.</p>
+    </section>
 </div>
 
 <!-- webrings and credits -->

home.css

@@ -1,6 +1,11 @@
 /* about me section/first terminal */
 
 #sneexy > section {
+    #logo {
+        width: 40rem;
+        height: auto;
+    }
+
     h1 #pfp {
         width: auto;
         height: 6rem;
@@ -345,6 +350,10 @@ div#quotes.terminal .socials-contacts-list #binbows {
 
 @media screen and (max-width: 59em) {
     #sneexy > section {
+        #logo {
+            max-width: 100%;
+        }
+
         .selfinfo {
             grid-template-areas:
                 "pronouns"

index.html

@@ -92,6 +92,9 @@
     </div>
     <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/sneexy</span> <span class="status">•</span> <span style="padding-left:11px;">cat sneexy</span></p>
     <section>
+        <img id="logo" loading="lazy" src="/assets/sneexy.webp" alt="Sneexy" /> <br>
+        <audio controls loop src="/assets/ASimpleMachine.mp3"></audio> <br>
+        <small>theme song by <a href="https://wolfdo.gg/@ChalkLlate">ChalkLlate</a>!</small>
         <h1><img loading="lazy" id="pfp" src="/assets/synth tpose spin.gif" alt="3D Low poly model of my synth character. He's a pretty chubby synth with a belly and chest made entirely out of goo, his frame is mostly made with shades of grey with lime/pastel green accents." title="3D Low poly model of my synth character. He's a pretty chubby synth with a belly and chest made entirely out of goo, his frame is mostly made with shades of grey with lime/pastel green accents."> hey, i'm <span class="rainbow">ruben!</span></h1>
         <small>cheesed to meet ya.</small>
         <p style="margin-bottom: -2px;">big gooey synth who is constantly tired.</p>

style.css

@@ -395,6 +395,11 @@ details.styled[open] {
     }
 }
 
+/* audio */
+audio {
+    border-radius: 3rem;
+}
+
 /* padding above first terminal */
 
 body:has(div.toc) {