profile-mode: improvements

- update css logic
- rm redundant code
- reduce image size, it looks big imo

assets/css/profile-mode.css

@@ -1,39 +1,33 @@
-.main {
+.main .profile {
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80%;
     text-align: center;
-    display: table;
 }
 
-.main>.profile {
+.profile .profile_inner h1 {
-    display: table-cell;
-    vertical-align: middle;
-}
-
-.main>.profile>.profile_inner {
-    transform: translate(0, -10%);
-}
-
-.profile_inner h1 {
     padding: 12px 0;
 }
 
-.profile_inner span {
+.profile .profile_inner span {
     padding: 10px 0;
     font-size: 18px;
 }
 
-img {
+.profile img {
     display: inline-table;
-    width: 180px;
+    width: 150px;
     border-radius: 50%;
     pointer-events: none;
 }
 
 @media screen and (max-width: 600px) {
-    img {
+    .profile img {
-        width: 150px;
+        width: 120px;
-    }
-    .main>.profile>.profile_inner {
-        transform: translate(0, 0);
     }
 }
 
@@ -59,4 +53,4 @@ img {
 
 .button:active {
     transform: scale(0.96);
-}
+}