Update responsiveness

Has an okay general responsiveness for mobile devices now, both landscape and portrait. Should fix later.

A lot of messy code here as I get better at basic frontend.

STYLES.CSS

@@ -197,7 +197,6 @@ img.logo:hover{
     animation-iteration-count: 1;
 }
 .containerTestItem {
-    align-items: center;
     flex: 1 1 100px;
     margin: auto;
     display: flex;
@@ -218,6 +217,7 @@ img.logo:hover{
     color:black;
     text-decoration: none;
 }
+
 .topnav div {
     flex: 1 1 0;
 }
@@ -396,8 +396,38 @@ h1{
     padding-left: 2vw; padding-right: 2vw;
 }
 }
-/* Phones  */
-@media only screen and (max-height: 700px) and (orientation:portrait){
+/* mobile devices portrait  */
+@media only screen and (max-height: 1370px ) and (orientation:portrait){
+    .bigText{
+        margin-top: 0%;
+        font-size: 4vh;
+    }
+    #aboutMeTop {
+        max-height: 5vh;
+    }
+    #aboutMeHey, #aboutMeHeader {
+        font-size: 1.6vh;
+    }
+    #biography {
+        font-size: 2.2vh;
+    }
+    .CTIText {
+        font-size: 2vh;
+    }
+    .socials {
+        max-height: 400vh;
+        max-width: 400vw;
+    }
+    .socialsAnimation {
+        max-height: 400vh;
+        max-width: 400vw;
+    }
+    .socialsAnimation p {
+        font-size: 10vw;
+    }
+    .colorstrip2 p {
+        font-size: 1vh;
+    }
     .console { height: 58vh; width: 80vw;
     border-radius: 5%;
     z-index: 100;