Add cool hover thingy

assets/style.css

@@ -77,3 +77,25 @@ header, footer {
 
 .posts div { margin: 1rem 0;}
 
+#summary {
+  display: inline-block;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+#detail {
+    display:none;
+  width: 25rem;
+  padding: 1rem;
+  border-radius: 8px;
+  position: absolute;
+  top: 16rem;
+  left: 0;
+  margin: 0 calc(50vw - 35ch);
+  background-color: var(--bg-mid);
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+#summary:hover + #detail {
+    display:block;
+}

index.html

@@ -21,7 +21,22 @@
         <h2 class="heroHeader"> ~notusknot</h3>
 
         <h3> &gt; About me </h3>
-            Hi, I'm notusknot, a student interested in many things. I like music, programming, nature, minimalism, peanut butter, philosophy, and more. 
+            Hi, I'm notusknot, a student interested in many things. I like 
+            <div id="summary">music</div>,
+            <div id="detail">I play oboe and drums and listen to a wide variety of music. Currently I am working on developing my
+            marching-style drumming and composition skills.</div>
+
+            <div id="summary">programming</div>, 
+            <div id="detail">I'm somewhat proficient in Python, and am (at a basic level) familiar with a few other languages
+            (JavaScript, Rust, Bash, Nix). I'm interested in a wide variety of topics, including OS development, functional programming, 
+            internet services, DevOps, neural nets, or really any sort of cool algorithm. I am also specifically interested in the cross between technology and health, 
+            and finding ways we can use technology to help us rather than harm us. I think Facebook, Twitter, Reddit, TikTok, Instagram, etc are overall 
+            wholly harmful for individuals and society, and we should find better alternatives.</div>
+
+            <div id="summary">philosophy</div>, 
+            <div id="detail">I'm still pretty new to philosophy but I think it's really interesting. I'm currently learning about
+            Stoicism.</div>
+            nature, minimalism, peanut butter, and more. 
             You can check me out at <a target="_blank" href="https://github.com/notusknot/">my GitHub</a> or
             <a target="_blank" href="https://www.youtube.com/channel/UCqnqXkgOfsniZ-_V2Fup4sw">my YouTube</a>. If you want to contact me, my email
             is <a href='mail&#116;o&#58;n&#111;tu&#115;&#107;%6Eo%7&#52;&#64;p&#109;&#46;m%6&#53;'>notus&#107;&#110;ot&#64;pm&#46;me</a> and my Discord