make the list not dynamically size (+ bonus yoshi gif)

index.html

@@ -97,6 +97,7 @@
         </article>
     </div>
 
+    <img class="yoshi" src="/home/ruben/Git/pages/assets/yoshi.gif" alt="gif of a yoshi model dancing" />
 </div>
 
 

style.css

@@ -299,11 +299,11 @@ a {
 
 /* -- styling the rest of the elements/custom stuff -- */
 .main {
-    width: 100%;
-    max-width: 60%;
-    position: absolute;
-    top: 20%;
-    transform: translate(31%, -7%);
+    position: relative;
+    width: 60rem;
+    top: 2rem;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .pfp-image {
@@ -373,15 +373,29 @@ a {
 .fedi > small > a, .revolt > small > a, .matrix > small > a, .xmpp > small > a, .shitcord > small > a {
     font-size: 16px;
 }
+
+.fedi {
+    list-style: url("/home/ruben/Documents/Unnamed.png");
+    width: 10px;
+    height: 10px; 
+}
 /* -- end of puke code -- */
+
+.yoshi {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+}
 /* -- end of styling the rest of the elements -- */
 
 /* -- shirnk cards if screen is small -- */
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1000px) {
     .main {
         width: 100%;
         max-width: 90%;
-        transform: translate(4%, -3%);
+        transform: translate(6%, 0%);
+        margin-left: unset;
+        margin-right: unset;
     }
 
     .intro-box {