Input for mobile users done

build/sass/_app.scss

@@ -0,0 +1,23 @@
+.app {
+    
+    display: flex;
+    justify-content: space-around;
+
+    margin-top: 2vh;
+
+    .column-1 {
+
+    }
+
+    .column-2 {
+        display: flex;
+        flex-direction: column;
+
+        justify-content: space-between;
+    }
+}
+
+@import 'hangman';
+@import 'puzzleWord';
+@import 'current-score';
+@import 'categories';

build/sass/_categories.scss

@@ -0,0 +1,152 @@
+.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;
+
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            img, .blank-space {
+                height: 4vw;
+                width: 4vw;
+            }
+
+            @mixin backgroundAndHoverDefiner($buttonColor, $textColor: #000) {
+
+                color: $textColor;
+                
+                background-color: $buttonColor; 
+                border: adjust-color($color: $buttonColor, $blackness: 3%, $alpha: 1.0) solid 2px;
+
+                cursor: pointer;
+
+                transition: 0.4s ease-in-out;
+                
+                &:hover {
+                    background-color: adjust-color($color: $buttonColor, $lightness: 10%, );
+                    transition: 0.4s ease-in-out;
+                    
+                    & img {
+                        animation: bounce;
+                        animation-duration: 0.5s;
+                    }
+                }
+
+            }
+
+            &.Select {
+                $buttonColor: #E96363;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Cities, &.Ciudades {
+                $buttonColor: #5f9ea0;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Pokemon {
+                $buttonColor: #ffcb05;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Programming.Languages, &.Lenguajes.De.Programación {
+                $buttonColor: #e46f01;
+                $textColor: #fff;
+
+                @include backgroundAndHoverDefiner($buttonColor, $textColor);
+            }
+
+            &.Animals, &.Animales {
+                $buttonColor: #efa482;
+
+                @include backgroundAndHoverDefiner($buttonColor)
+            }
+
+            &.Countries, &.Países {
+                $buttonColor: #9f0000;
+                $textColor: #fff;
+
+                @include backgroundAndHoverDefiner($buttonColor, $textColor);
+            }
+
+            &.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;
+            }
+        }
+    }
+}

build/sass/_current-score.scss

@@ -0,0 +1,16 @@
+.current-score {
+    
+    display: flex;
+
+    flex-direction: row-reverse;
+
+    @include titleFont();
+
+    font-size: 18pt;
+
+    color: rgb(88, 255, 107);
+
+    .text {
+        user-select: none;
+    }
+}

build/sass/_defeat-victory.scss

@@ -0,0 +1,32 @@
+.defeat, .victory {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    height: 100vh;
+    width: 100vw;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    font-size: 80pt;
+
+    background-color: rgba(0, 0, 0, 0.775);
+
+    user-select: none;
+
+    h1 {
+        padding: 5%;
+        background-color: rgba(0, 0, 0, 0.775);
+    }
+}
+
+.defeat {
+    color: rgb(255, 99, 99);
+}
+
+.victory {
+    color: rgb(88, 255, 107);
+}

build/sass/_hangman.scss

@@ -0,0 +1,8 @@
+.hangman {
+
+    user-select: none;
+
+    img {
+        width: 20vw;
+    }
+}

build/sass/_header.scss

@@ -0,0 +1,25 @@
+header {
+    border-bottom: 1px solid rgb(200, 200, 200);
+
+    height: 15vh;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    h1 {
+        @include titleFont();
+        @include titleNormalize();
+
+    }
+
+    h2 {
+        @include titleFont();
+        @include titleNormalize();
+        color: rgb(72, 166, 253);
+        margin-top: 0.5vh;
+
+        cursor: pointer;
+    }
+}

build/sass/_letters-registered.scss

@@ -0,0 +1,17 @@
+.letters-registered {
+    margin: 0px 5vw;
+
+    display: flex;
+
+    align-items: center;
+
+    font-family: 'Times New Roman', Times, serif;
+    color: rgb(145, 140, 108);
+    font-size: 50pt;
+
+    height: 20vh;
+
+    span {
+        margin-left: 1vw;
+    }
+}

build/sass/_loading.scss

@@ -0,0 +1,19 @@
+.loading {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    width: 100vw;
+    height: 100vh;
+
+    background-color: #fff;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+        width: 50px;
+        height: 50px;
+    }
+}

build/sass/_puzzleWord.scss

@@ -0,0 +1,33 @@
+.puzzleWord {
+    @include bodyFont();
+
+    font-size: 50pt;
+
+    display: flex;
+    align-items: center;
+
+    max-width: 70vw;
+
+    display: flex;
+    flex-wrap: wrap;
+
+    .letter {
+        width: 3vw;
+        height: 70pt;
+        margin-left: 2vw;
+
+        border-bottom: 5px solid #000;
+
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+    }
+
+    .counter {
+        font-size: 40pt;
+
+        font-family:Arial, Helvetica, sans-serif;
+
+        margin-left: 3vw;
+    }
+}

build/sass/index.scss

@@ -0,0 +1,27 @@
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+@mixin titleFont() {
+
+    font-family: 'Raleway', sans-serif;
+    font-weight: bold;
+}
+
+@mixin titleNormalize() {
+    user-select: none;
+    margin: 0;
+}
+
+@mixin bodyFont() {
+
+    font-family: 'Rambla', sans-serif;
+    font-weight: 400;
+}
+
+@import 'header';
+@import 'app';
+@import 'defeat-victory';
+@import 'loading';
+@import 'letters-registered';