diff --git a/index.html b/index.html
index 1ce8392..8ab9a89 100644
--- a/index.html
+++ b/index.html
@@ -14,15 +14,16 @@
 
     <div class="pixel-corners">
         <div class="intro-box">
-            <div class="pixel-corners--wrapper">
-                <div class="pfp"> <img class="pfp-image" src="/assets/pfp.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
-            </div>
-
-            <div class="intro-text">
+            <header class="intro-info">
+                <div class="pixel-corners--wrapper">
+                    <div class="pfp"> <img class="pfp-image" src="/assets/pfp.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
+                </div>
                 <h1 class="site-intro">hey, i'm ruben.</h1>
                 <h2 class="site-subtitle">welcome to my site.</h2>
-                <small class="navnt">~/links <span class="arrow">→</span> ~/about-me <span class="arrow">→</span> ~/fun-facts</small>
-            </div>
+                <nav>
+                    <small class="navnt">~/links <span class="arrow">→</span> ~/about-me <span class="arrow">→</span> ~/fun-facts <span class="arrow">→</span> etc.</small>
+                </nav>
+            </header>
         </div>
     </div>
 
diff --git a/style.css b/style.css
index fa21b83..7808278 100644
--- a/style.css
+++ b/style.css
@@ -61,6 +61,7 @@ html {
     font-weight: bold;    
     font-style: italic;
 }
+/* -- font nuts -- */
 
 /* -- pixelated border radius -- */
 .pixel-corners,
@@ -332,7 +333,7 @@ a {
     background-color: var(--bg);
 }
 
-.intro-text, .links-n-socials, .about-me, .fun-facts {
+.intro-info, .links-n-socials, .about-me, .fun-facts {
     flex-direction: column;
 }
 
@@ -349,7 +350,7 @@ a {
     height: 150px;
 }
 
-.intro-text {
+.intro-info {
     text-align: center;
     transform: translateY(4%)
 }
@@ -360,11 +361,17 @@ a {
 /* -- end of styling the rest of the elements -- */
 
 /* -- shirnk cards if screen is small -- */
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 800px) {
     .main {
-      width: 100%;
-      max-width: 90%;
-      transform: translate(4%, -3%);
+        width: 100%;
+        max-width: 90%;
+        transform: translate(4%, -3%);
+    }
+
+    .pfp, .intro-box {
+        display: grid;
+        justify-content: center;
+        align-content: center;
     }
 }
 /* -- yea -- */
\ No newline at end of file