Cool pill-style buttons for link tree

css/style.css

@@ -84,11 +84,41 @@ main div.hero p.justify {
 }
 
 main div.hero ul {
-    width: fit-content;
     margin-left: auto;
     margin-right: auto;
-    text-align: left;
-    padding-left: 20px;
+}
+
+ul.linktree {
+    list-style-type: none;
+    margin: 0;
+    padding: 8px;
+    padding-left: 8px;
+    width: 30%;
+}
+
+@media screen and (max-width: 600px) {
+    ul.linktree {
+        width: 60%;
+    }
+}
+
+ul.linktree li {
+    margin: 12px;
+    background-color: #4c5053;
+    padding: 8px 16px;
+    border-radius: 50px;
+    text-align: center;
+    transition-duration: 0.5s;
+}
+
+ul.linktree li:hover {
+    cursor: pointer;
+    background-color: #383c3f
+}
+
+ul.linktree li a {
+    text-decoration: none;
+    color: white;
 }
 
 div.footer {

zakarya/index.html

@@ -24,7 +24,7 @@ $(document).ready(function(){
       <div style="margin-top: 10%;"></div><!-- Separator -->
       <div class="hero">
         <h1>Zakarya</h1>
-        <ul>
+        <ul class="linktree">
           <li><a href="https://github.com/CZakarya" target="_blank" rel="noopener noreferrer">GitHub</a></li>
           <li><a href="https://www.youtube.com/@czakarya" target="_blank" rel="noopener noreferrer">Youtube</a></li>
           <li><a href="https://mstdn.party/@zakarya" target="_blank" rel="noopener noreferrer">Mastodon</a></li>