add hide if mobile, and pfp expansion

css/styles.css

@@ -240,13 +240,14 @@ a:visited {
     width: calc(max(100%, 500px));
     height: 50%;
 }
+
 #profilepic {
     width: calc(min(256px, 25%));
     height: 256px;
     object-fit: cover;
-    background-color: black;
     outline: var(--outline-thickness) solid white;
-    animation: profileintro 1s var(--easer) 0.2s both, flash_outline 500ms var(--easer) 0.2s both;
+    animation: flash_outline 500ms var(--easer) 0.2s both;
+    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 
@@ -333,7 +334,6 @@ a:visited {
 #embedframe {
     opacity: 0;
     transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
-    height: calc(min(100%, 720px));
     width: 100%;
     height: 100%;
 }
@@ -347,7 +347,7 @@ a:visited {
 .blurred-background {
     -webkit-backdrop-filter: blur(2px);
     backdrop-filter: blur(2px);
-    
+
 }
 
 @keyframes slide-base {
@@ -385,22 +385,6 @@ a:visited {
     }
 }
 
-@keyframes profileintro {
-    0% {
-        opacity: 0;
-        width: 0%;
-
-    }
-
-    40% {
-        width: 0%;
-    }
-
-    80% {
-        box-shadow: 0px 0px var(--col-shadow);
-    }
-}
-
 @keyframes infointro {
     0% {
         box-shadow: 0px 0px var(--col-shadow);

index.html

@@ -95,7 +95,8 @@ <h2 id="hello">Hi</h2>
             </div>
         </div>
     </div>
-
+    <script src="scripts/hideifmobile.js"></script>
     <script src="scripts/main.js"></script>
     <script src="scripts/links.js"></script>
+    <script src="scripts/icon.js"></script>
 </body>

scripts/icon.js

@@ -0,0 +1,12 @@
+
+icon = document.getElementById("profilepic");
+
+icon.onclick = () => {
+    if (icon.style.width == "512px") {
+        icon.style.width = "";
+        icon.style.height = "";
+    } else {
+        icon.style.width = "512px";
+        icon.style.height = "512px";
+    }
+}