diff --git a/assets/yoshi.gif b/assets/yoshi.gif
new file mode 100644
index 0000000..45899cf
Binary files /dev/null and b/assets/yoshi.gif differ
diff --git a/assets/yoshi2.gif b/assets/yoshi2.gif
new file mode 100644
index 0000000..91a3430
Binary files /dev/null and b/assets/yoshi2.gif differ
diff --git a/index.html b/index.html
index 0bc9107..2dbea2b 100644
--- a/index.html
+++ b/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>
 
 
diff --git a/style.css b/style.css
index 6beb6fa..9f68787 100644
--- a/style.css
+++ b/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 {