Victory actions done

styles/game.scss

@@ -5,6 +5,9 @@
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
 
+    z-index: 100;
+    position: relative;
+    
     .box {
 
         width: 10vw;
@@ -26,6 +29,39 @@
 
         user-select: none;
         color: #e7e7e7;
+        background-color: rgb(221, 121, 121);
+
+        &.winner-box {
+
+            background-color: rgba(255, 255, 255, 0);
+
+            &.black-letters {
+
+                color: rgb(48, 48, 48);
+            }
+        }
+    }
+}
+
+.game .background-winner-div {
+
+    background-color: rgba(95, 255, 62, 0.692);
+
+    position: absolute;
+
+    width: 80vw;
+    height: 80vw;
+
+    z-index: 10;
+
+    opacity: 0%;
+
+    transition: 1s ease-in-out;
+
+    &.show {
+
+        opacity: 100%;
+        transition: 1s ease-in-out;
     }
 }
 
@@ -94,17 +130,72 @@
 
 .game .players-turn {
 
-    position: absolute;
+    // position: absolute;
 
-    top: -30%;
-    left: -20%;
+    // top: -30%;
+    // left: -20%;
+
+    margin-bottom: 5vh;
+    margin-left: -3vw;
 
     span {
 
         font-size: 30pt;
         font-weight: bold;
 
-        color: #e7e7e7;
+        color: #ffffff;
+    }
+}
+
+.victory-message {
+
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: bold;
+    font-size: 30pt;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-direction: column;
+
+    color: #fff;
+
+    margin-top: 5vh;
+
+    button {
+
+        width: 30vw;
+        max-width: 330px;
+        height: 9vw;
+        max-height: 100px;
+
+        background: none;
+        border: 2px solid #fff;
+        border-radius: 10px;
+
+        color: #fff;
+        
+        font-family:Arial, Helvetica, sans-serif;
+
+        font-size: 21pt;
+        font-weight: bold;
+
+        margin-top: 3vh;
+
+        transition: 0.4s ease-in-out;
+
+        &:hover {
+
+            background-color: rgba(0, 0, 0, 0.062);
+
+            transition: 0.4s ease-in-out;
+        }
+    }
+
+    &.hidden {
+
+        opacity: 0%;
     }
 }