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 {