Fixed bug that resets card flip state when pausing/resuming the timer, updated styling to be more consistent

static/styles.css

@@ -9,11 +9,6 @@
         margin: 0.3em 0;
     }
 
-    .card {
-        height: 7.5em;
-        width: 4em;
-    }
-
     h3 {
         font-size: 20px;
     }
@@ -21,6 +16,14 @@
     .app-content {
         width: 92%;
     }
+
+    .card {
+        padding: 0.5em;
+        width: 5em;
+        height: 7.5em;
+        font-size: 0.9em;
+        margin: 0 0.7em 0.7em 0;
+    }
 }
 
 @media(min-width: 750.01px) {
@@ -37,6 +40,9 @@
     .card {
         height: 8.5em;
         width: 5em;
+        padding: 1em;
+        font-size: 1.1em;
+        margin: 0.5em;
     }
 
     h3 {
@@ -65,8 +71,15 @@ html, body {
 }
 
 @keyframes fadein {
-    from { opacity: 0 }
-    to { opacity: 1 }
+    from {
+        opacity: 0;
+        left: -200px;
+
+    }
+    to {
+        opacity: 1;
+        left: 0;
+    }
 }
 .app-content {
     text-align: center;
@@ -79,6 +92,21 @@ html, body {
     width: 100%;
     height: 5rem;
     text-align: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+#footer a {
+    font-size: 0.9em;
+    color: #bd2a2a;
+    text-decoration: #bd2a2a;
+    cursor: pointer;
+    margin-left: 1em;
+}
+
+#footer a:hover {
+    color: rgba(23, 20, 105, 0.4);
 }
 
 .app-header, .app-header-secondary {
@@ -95,9 +123,9 @@ button {
 }
 
 .app-btn {
-    background-color: white;
+    background-color: #f8f8f8;
     color: #bd2a2a;
-    border: 1px solid #7d0b0b;
+    border: 1px solid #d3d3d3;
     width: 10em;
     padding: 1em;
     border-radius: 3px;
@@ -111,8 +139,6 @@ button {
     border: 1px solid #7d0b0b;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
     border-radius: 3px;
-    padding: 1em;
-    margin: 0.5em;
     user-select: none;
 }
 
@@ -150,7 +176,7 @@ button {
 
 .app-btn:hover, .app-btn:focus {
     cursor: pointer;
-    background-color: rgba(24, 9, 82, 0.15);
+    background-color: rgba(23, 20, 105, 0.15);
 }
 
 .app-btn-secondary:hover, .app-btn-secondary:focus {
@@ -178,14 +204,19 @@ button {
     color: #7d0b0b;
 }
 
+#card-select-header button {
+    margin-right: 1em;
+}
+
 #reset-btn {
-    background-color: transparent;
-    color: #7d0b0b;
-    border: 1px solid #7d0b0b;
-    width: 8em;
-    padding: 0.5em;
-    margin: 0 1em 0 0;
-    cursor: pointer;
+    /*background-color: transparent;*/
+    /*color: #7d0b0b;*/
+    /*border-radius: 5px;*/
+    /*border: 1px solid #7d0b0b;*/
+    /*width: 8em;*/
+    /*padding: 0.5em;*/
+    /*margin: 0 1em 0 0;*/
+    /*cursor: pointer;*/
 }
 
 #reset-btn:hover {
@@ -199,7 +230,7 @@ button {
 }
 
 #create-game-container, #lobby-container, #join-game-container, #game-container, #launch, #message-box {
-    animation: fadein 0.8s;
+    animation: fadein 0.8s ease-in;
 }
 
 a {
@@ -209,28 +240,30 @@ a {
 
 input[type=text] {
     background-color: transparent;
-    border: 2px solid #7d0b0b;
+    border: 1px solid #171469;
     caret-color: gray;
     margin: 0.5em 0 1em 0;
     color: gray;
-    padding: 0.5rem;
-    width: 8em;
+    padding: 0.7em;
+    width: 9em;
+    border-radius: 5px;
     font-size: 1.1em;
 }
 
 input[type=number] {
     background-color: transparent;
-    border: 2px solid #7d0b0b;
+    border: 1px solid #171469;
+    border-radius: 5px;
     caret-color: gray;
     margin: 0.5em 0 1em 0;
     color: gray;
-    padding: 0.5rem;
-    width: 3em;
+    padding: 0.7em;
+    width: 4em;
     font-size: 1.1em;
 }
 
 input[type=text]:hover {
-    background-color: rgba(24, 9, 82, 0.15);;
+    background-color: rgba(23, 20, 105, 0.15);
 }
 
 label {
@@ -261,7 +294,7 @@ label {
     color: #7d0b0b;
     border-radius: 3px;
     font-size: 1.2em;
-    background-color: rgba(0, 0, 0, .1);
+    background-color: rgba(23, 20, 105, 0.1);
     padding: 0.5em;
     margin: 0.5em 0;
     text-align: left;
@@ -324,21 +357,37 @@ label {
 
 
 #game-card {
-    border: 1px solid #7d0b0b;
     background-color: #f0f0f0;
     display: flex;
     flex-direction: column;
+    cursor: pointer;
     justify-content: space-between;
     max-width: 17em;
     border-radius: 3px;
     height: 23em;
     margin: 0 auto 2em auto;
     width: 72%;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 13px 17px rgba(0,0,0,0.6);
     perspective: 1000px;
     transform-style: preserve-3d;
 }
 
+.village {
+    border: 2px solid rgba(23, 20, 105, 0.5);
+}
+
+.village h2 {
+    color: #171469;
+}
+
+.wolf {
+    border: 2px solid rgba(125, 11, 11, 0.5);
+}
+
+.wolf h2 {
+    color: #7d0b0b;
+}
+
 .flip-up {
     animation: flip-up 0.7s;
     animation-fill-mode: forwards;
@@ -352,7 +401,6 @@ label {
 
 #game-card h2 {
     font-size: 2em;
-    color: #7d0b0b;
     font-family: 'diavlo', sans-serif;
 }
 
@@ -372,7 +420,6 @@ label {
     margin: auto auto;
     border-radius: 3px;
     text-align: center;
-    border: 1px solid gray;
 }
 
 .game-card:hover {
@@ -425,6 +472,11 @@ label {
 #play-pause {
     width: 2.5em;
     height: 2.5em;
+    cursor: pointer;
+}
+
+#play-pause:hover {
+    opacity: 0.5;
 }
 
 #play-pause:hover {