responsive design done

public/sass/_categories.scss

@@ -23,8 +23,8 @@
 
         box-sizing: border-box;
 
-        padding-top: 10vh;
-        padding-bottom: 10vh;
+       // padding-top: 10vh;
+        //padding-bottom: 10vh;
 
         button, select {
             height: 10vh;
@@ -149,4 +149,20 @@
             }
         }
     }
+}
+
+@media (max-width: 991.98px) {
+
+    .categories-container {
+        
+        .categories {
+            padding: 0;
+
+            button, select {
+    
+                font-size: 4vw !important;
+            }
+        }
+
+    }
 }

public/sass/_defeat-victory.scss

@@ -1,4 +1,5 @@
 .defeat, .victory {
+    font-family: Arial, Helvetica, sans-serif;
     position: absolute;
     left: 0;
     top: 0;
@@ -11,7 +12,7 @@
     align-items: center;
     justify-content: center;
 
-    font-size: 80pt;
+    font-size: 7vw;
 
     background-color: rgba(0, 0, 0, 0.775);
 
@@ -29,4 +30,13 @@
 
 .victory {
     color: rgb(88, 255, 107);
+}
+
+@media (max-width: 991.98px) {
+
+    .defeat, .victory {
+
+        height: 100%;
+        width: 100%;
+    }
 }

public/sass/_game-container.scss

@@ -17,6 +17,41 @@
     }
 }
 
+@media (max-width: 991.98px) {
+
+    .game-container {
+
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .column-1 {
+            order: 10;
+
+            .hangman {
+
+                img {
+
+                    width: 30vw;
+                }
+            }
+        }
+
+        .column-2 {
+            order: 0;
+            margin-bottom: 10vh;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+}
+
+/*@media (max-width: 576px) {
+
+}*/
+
 @import 'hangman';
 @import 'word';
 @import 'current-score';

public/sass/_letters-registered.scss

@@ -1,5 +1,5 @@
 .letters-registered {
-    margin: 0px 5vw;
+    padding: 0px 5vw;
 
     display: flex;
 

public/sass/_loading.scss

@@ -3,9 +3,12 @@
     left: 0;
     top: 0;
 
-    width: 100vw;
+    width: 100%;
     height: 100vh;
 
+    margin: 0;
+    padding: 0;
+
     background-color: #fff;
 
     display: flex;

public/sass/_word.scss

@@ -34,4 +34,31 @@
 
         margin-left: 3vw;
     }
+}
+
+@media (max-width: 991.98px) {
+
+    .word {
+
+        .letter {
+
+            font-size: 10vw;
+        }
+
+        .counter {
+            align-self: flex-end;
+        }
+    }
+}
+
+@media (max-width: 576px) {
+
+    .word {
+
+        .counter {
+            
+            font-size: 10vw;
+
+        }
+    }
 }