Categories styles done

public/sass/_app.scss

@@ -13,10 +13,11 @@
         display: flex;
         flex-direction: column;
 
-        justify-content: space-between
+        justify-content: space-between;
     }
 }
 
 @import 'hangman';
 @import 'puzzleWord';
-@import 'current-score';
+@import 'current-score';
+@import 'categories';

public/sass/_categories.scss

@@ -0,0 +1,132 @@
+.categories-container {
+
+    overflow-y: hidden;
+
+    .categories {
+        
+        position: absolute;
+        
+        top: 15vh;
+        left: 0;
+        
+        height: 85vh;
+        width: 100vw;
+        
+        background-color: rgb(225, 225, 225);
+
+        transition: opacity 0.4s ease-in-out;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+
+        box-sizing: border-box;
+
+        padding-top: 10vh;
+        padding-bottom: 10vh;
+
+        button, select {
+            height: 10vh;
+            width: 50vw;
+            
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 22pt;
+
+            border: none;
+            border-radius: 10px;
+
+            text-align: center;
+            text-align-last: center;
+            -moz-text-align-last: center;
+
+            @mixin backgroundAndHoverDefiner($buttonColor) {
+                background-color: $buttonColor; 
+                border: adjust-color($color: $buttonColor, $blackness: 3%, $alpha: 1.0) solid 2px;
+
+                transition: 0.4s ease-in-out;
+                
+                &:hover {
+                    background-color: adjust-color($color: $buttonColor, $lightness: 10%, );
+                    transition: 0.4s ease-in-out;
+                    
+                }
+
+            }
+
+            &.Select {
+                $buttonColor: #E96363;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Cities {
+                $buttonColor: #5f9ea0;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Pokemons {
+                $buttonColor: #ffcb05;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Programming.Languages {
+                $buttonColor: #e46f01;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Animals {
+                $buttonColor: #efa482;
+
+                @include backgroundAndHoverDefiner($buttonColor)
+            }
+
+            &.Countries {
+                $buttonColor: #9f0000;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Random {
+                $buttonColor: #4285f4;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+        }
+        
+        &.hidden {
+            opacity: 0%;
+            
+            top: 0;
+            height: 85vh;
+
+            button, select {
+
+                height: 5vh;
+            }
+        }
+        
+        &.show {
+            opacity: 100%;
+            
+        }
+        
+        &.stretch {
+            height: auto;
+            width: 100%;
+            
+            button, select {
+                
+                margin-bottom: 5vh;
+            }
+
+            &:last-child {
+
+                margin-bottom: 0vh !important;
+            }
+        }
+    }
+}