socials card testing

style.css

@@ -333,7 +333,7 @@ a {
     background-color: var(--bg);
 }
 
-.intro-info, .links-n-socials, .about-me, .fun-facts {
+.intro-text, .links-n-socials, .about-me, .fun-facts {
     flex-direction: column;
 }
 
@@ -341,23 +341,39 @@ a {
     justify-content: space-evenly;
 }
 
-.links-n-socials .links-list {
-    flex-direction: row;
-}
-
 .pfp {
     width: 150px;
     height: 150px;
 }
 
-.intro-info {
+.intro-text {
     text-align: center;
     transform: translateY(4%)
 }
 
-.links-n-socials {
-    position: relative;
+/* -- below is all the css used only for the social cards, and its probably Very Bad so get a puke bag or something read -- */
+.social-lists {
+    display: flex;
 }
+
+.social-links {
+    display: grid;
+    margin-right: auto;
+    align-content: start;
+}
+
+.social-links > h2 {
+    margin-bottom: -7px;
+}
+
+.social-links > ul {
+    margin-left: -22px;
+}
+
+.fedi > small > a, .revolt > small > a, .matrix > small > a, .xmpp > small > a, .shitcord > small > a {
+    font-size: 16px;
+}
+/* -- end of puke code -- */
 /* -- end of styling the rest of the elements -- */
 
 /* -- shirnk cards if screen is small -- */
@@ -368,10 +384,24 @@ a {
         transform: translate(4%, -3%);
     }
 
-    .pfp, .intro-box {
-        display: grid;
+    .intro-box {
+        display: flex;
         justify-content: center;
         align-content: center;
+        flex-direction: column;
+    }
+
+    .pfp, .pixel-corners--wrapper {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .pixel-corners--wrapper {
+        margin-bottom: 20px;
+    }
+
+    .social-lists {
+        flex-direction: column;
     }
 }
 /* -- yea -- */