mobile animation styling

static/game.js

@@ -60,7 +60,7 @@ function triggerExitAnimation(e) {
 
 function triggerEntranceAnimation(selector, entranceClass, exitClass, image) {
         let transitionEl = document.querySelector(selector);
-        transitionEl.style.display = 'block';
+        transitionEl.style.display = 'flex';
         transitionEl.addEventListener('animationend', triggerExitAnimation, {"capture": true, "once": true});
         transitionEl.classList.remove(entranceClass);
         transitionEl.entranceClass = entranceClass;

static/styles.css

@@ -90,6 +90,19 @@
     #join-game-container a button {
         width: 100%;
     }
+
+    #overlay {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    #killed-name {
+        padding-top: 0;
+        margin: 0 0.5em;
+        font-size: 2em;
+    }
 }
 
 @media(min-width: 750.01px) {
@@ -175,6 +188,17 @@
         margin-right: 1em;
     }
 
+    #killed-name {
+        padding-top: 2em;
+        font-size: 2.5em;
+        margin: 0;
+    }
+
+    #overlay {
+        justify-content: flex-start;
+        align-items: center;
+    }
+
 }
 
 @font-face {
@@ -1036,6 +1060,7 @@ label {
     position: fixed;
     user-select: none;
     display: none;
+    flex-direction: column;
     width: 100%;
     height: 100%;
     top: 0;
@@ -1049,9 +1074,6 @@ label {
 #killed-name {
     display: none;
     color: white;
-    padding-top: 2em;
-    font-size: 2.5em;
-    margin: 0;
 }
 
 #killed-role {