finish hangman v1

resources/sass/pages/games/hangman.scss

@@ -1,48 +1,55 @@
 .game-container {
-    padding: 20px 30px;
+    max-width: 80rem;
+    margin: 0 auto;
+}
+.game-container-box {
+    padding: 2rem 3rem;
     position: relative;
-    margin: auto;
-    height: 350px;
-    width: 450px;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 .figure-container {
     fill: transparent;
-    stroke: $dark;
+    stroke: $mediumDark;
     stroke-width: 4px;
     stroke-linecap: round;
 }
 
 .figure-part {
     display: none;
+    stroke: $dark;
 }
 
 .wrong-letters-container {
-    position: absolute;
-    top: 20px;
-    right: 20px;
+    top: 4rem;
     display: flex;
     flex-direction: column;
     text-align: right;
 
+    .wrong-letters {
+        height: 3.5rem;
+    }
+
     p {
         margin: 0 0 5px;
     }
 
     span {
-        font-size: 24px;
+        font-size: 2.4rem;
     }
 }
 
 .word {
     display: flex;
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
+    align-self: center;
+    justify-self: center;
+    bottom: 1rem;
 
     .letter {
-        border-bottom: 3px solid #2980b9;
+        border-bottom: 3px solid $medium;
         display: inline-flex;
         font-size: 30px;
         align-items: center;
@@ -53,29 +60,27 @@
     }
 }
 
+.game-input {
+    max-width: 30rem;
+    margin: 0 auto;
+    text-align: center;
+}
+
 .popup-container {
-    background-color: rgba(0,0,0,0.3);
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    display: flex;
-    display: none;
-    align-items: center;
-    justify-content: center;
+    position: absolute;
+    width: calc(100% - 6rem);
 
     .popup {
-        background-color: #2980b9;
+        background-color: $medium;
         border-radius: 5px;
-        box-shadow: 0 15px 10px 3px rgba(0,0,0,0.1);
+        color: $light;
         padding: 20px;
         text-align: center;
 
         button {
             cursor: pointer;
             background-color: #fff;
-            color: #2980b9;
+            color: $dark;
             border: 0;
             margin-top: 20px;
             padding: 12px 20px;
@@ -93,18 +98,13 @@
 }
 
 .notification-container {
-    background-color: rgba(0,0,0,0.3);
-    border-radius: 10px 10px 0 0;
-    padding: 15px 20px;
-    position: absolute;
-    bottom: -50px;
-    transition: transform 0.3s ease-in-out;
+    background-color: $mediumLight;
+    border-radius: 2px;
+    padding: 1rem;
+    text-align: center;
+    margin-bottom: 6rem;
 
     p {
         margin: 0;
     }
-
-    &.show {
-        transform: translateY(-50px);
-    }
 }