play and pause button, more improved lobby view

client/styles/game.css

@@ -1,4 +1,8 @@
 .lobby-player, #moderator {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
     background-color: black;
     color: whitesmoke;
     padding: 10px;
@@ -14,6 +18,10 @@
     border: 2px solid #21ba45;
 }
 
+.lobby-player div:nth-child(2) {
+    color: #21ba45;
+}
+
 #moderator.moderator-client {
     border: 2px solid lightgray;
 }
@@ -182,7 +190,8 @@ h1 {
 }
 
 #client-container {
-    max-width: 30em;
+    max-width: 35em;
+    margin-top: 2em;
 }
 
 #client {
@@ -198,7 +207,7 @@ h1 {
 #client-name {
     color: whitesmoke;
     font-family: 'diavlo', sans-serif;
-    font-size: 37px;
+    font-size: 30px;
 }
 
 #client-user-type {
@@ -219,13 +228,6 @@ label[for='moderator'] {
     font-size: 30px;
 }
 
-label[for='lobby-players'] {
-    font-family: 'diavlo', sans-serif;
-    color: #21ba45;
-    filter: drop-shadow(2px 2px 4px black);
-    font-size: 30px;
-}
-
 #start-game-prompt {
     display: flex;
     align-items: center;
@@ -268,10 +270,46 @@ label[for='lobby-players'] {
     border: 2px solid #1c8a36;
 }
 
+#play-pause {
+    display: flex;
+    align-items: center;
+}
+
+#play-pause img {
+    cursor: pointer;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    width: 60px;
+}
+
+#play-pause img:hover {
+    filter: brightness(0.5);
+}
+
+#play-pause img:active {
+    transform: scale(0.95);
+}
+
 .paused {
     animation: pulse 0.75s linear infinite alternate;
 }
 
+#game-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.timer-container-moderator {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+
 @keyframes pulse {
     from {
         color: rgba(255, 255, 255, 0.1);