Updated README, hopefully fixed mobile design, refactored and refined desktop design

src/components/servantCard.astro

@@ -22,9 +22,7 @@ if(bond10 === "false") {
 ---
 
 <article>
-    <div class="heading-center">
-        <h1 class="servantname">{name}</h1>
-    </div>
+    <div class="heading">{name}</div>
     <img src={servant_img} alt={name}>
     <h2 class="subtext">
         Level {level}<br>
@@ -32,15 +30,22 @@ if(bond10 === "false") {
         NP {np}</h2>
     <div class="expand-on-hover">
         <img class={bondce_css} src={bondce_img} alt="">
-        <h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br>}{ml}</h2>
+        <h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br/>}{ml}</h2>
     </div>
 </article>
 
 <style>
-    .heading-center {
-        display: table;
+    .heading {
+        display: flex;
+        height: 4rem;
         width: 100%;
-        height: 4.5rem;
+        align-items: center;
+        justify-content: center;
+        font-size: 22px;
+        color: white;
+        max-width: 200px;
+        padding-bottom: 0.3rem;
+        font-weight: bold;
     }
 
     .servants-container {
@@ -58,7 +63,7 @@ if(bond10 === "false") {
         background-color: rgb(27, 27, 27);
         border-color: #1e1e1e;
         padding: 0em 0.75em;
-        width: auto;
+        width: 40%;
         height: auto;
         justify-content: center;
         text-align: center;
@@ -91,15 +96,6 @@ if(bond10 === "false") {
         line-height: 20px;
     }
 
-    .servantname {
-        font-size: 22px;
-        color: white;
-        max-width: 200px;
-        padding-bottom: 0.3rem;
-        display: table-cell;
-        vertical-align: middle;
-    }
-
     .expand-on-hover {
         z-index: 99;
         transform: scaleY(0);