Updated social links and more stuff like animations

style.css

@@ -30,16 +30,20 @@ a {
 
 header {
     text-align: center;
-    margin-bottom: 100px;
+    margin-bottom: 80px;
     color: #f0f0f0;
     font-size: 20px;
 }
 
+
 h1 {
-    font-size: 2.5rem;
-    transform: rotate(-1deg);
+    transition: all 0.3s ease;
     text-shadow: 2px 2px 0 #ffffff52, 3px 3px 0 #000;
     margin-bottom: 0.5rem;
+    transform-origin: center;
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
 }
 
 .social-links {
@@ -65,6 +69,7 @@ h1 {
     border: 2px solid #000;
     position: relative;
     box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1), 6px 6px 0 rgba(0, 0, 0, 0.05);
+    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
 .post-header {
@@ -132,26 +137,128 @@ h1 {
     display: block;
 }
 
-@keyframes wiggle {
+
+.post:hover {
+    transform: scale(1.1) translateY(-5px) !important;
+    box-shadow: 6px 6px 30px rgba(0, 0, 0, 1);
+}
+
+.subtext {
+    margin-bottom: 30px;
+}
+
+.social-links a {
+    margin: 0 10px;
+    color: #f0f0f0;
+    font-size: 2rem;
+    text-decoration: none;
+    display: inline-block;
+    /* Ensure proper alignment for the text-shadow */
+}
+
+.social-links a:hover {
+    transform: scale(1.1);
+    transition: transform 0.3s ease;
+    text-shadow:
+        0 0 3px white,
+        /* Solid outline */
+}
+
+/* Specific brand colors on hover */
+.social-links a:hover .fab.fa-github {
+    color: #181717;
+    /* GitHub's brand color */
+}
+
+.social-links a:hover .fab.fa-youtube {
+    color: #FF0000;
+    /* YouTube's brand color */
+}
+
+.social-links a:hover .fab.fa-steam {
+    color: #1b2838;
+    /* Steam's brand color */
+}
+
+.social-links a:hover .fab.fa-discord {
+    color: #7289da;
+    /* Discord's brand color */
+}
+
+.social-links a:hover .fa-brands.fa-bluesky {
+    color: #3E5BFF;
+    /* Bluesky's brand color */
+}
+
+@keyframes wildSpin {
     0% {
-        transform: rotate(2deg);
+        transform: scale(1) rotate(0deg);
+    }
+
+    25% {
+        transform: scale(1.5) rotate(180deg) skew(15deg);
     }
 
     50% {
-        transform: rotate(-2deg);
+        transform: scale(0.8) rotate(-180deg) skew(-15deg);
+    }
+
+    75% {
+        transform: scale(1.2) rotate(360deg);
     }
 
     100% {
-        transform: rotate(2deg);
+        transform: scale(1) rotate(720deg);
     }
 }
 
-.post {
-    transform: rotate(0deg);
-    transition: transform 0.3s ease-in-out;
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-5px) translateY(5px);
+    }
+
+    50% {
+        transform: translateX(5px) translateY(-5px);
+    }
+
+    75% {
+        transform: translateX(-5px) translateY(-5px);
+    }
 }
 
-.post:hover {
-    animation: wiggle 2s ease-in-out infinite;
-    transform: rotate(2deg);
-}
+h1:hover {
+    animation:
+        wildSpin 3s ease-in-out,
+        rainbow 3s linear,
+        shake 0.5s ease-in-out infinite;
+}
+
+.social-links a {
+    position: relative;
+}
+
+.social-links a::after {
+    content: attr(title);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 0.3rem;
+    border-radius: 0.3rem;
+    font-size: 0.875rem;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+}
+
+.social-links a:hover::after {
+    opacity: 1;
+}