principal screen done

public/sass/_app.scss

@@ -1,5 +1,22 @@
-@import 'hangman';
-
 .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';

public/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;
+    }
+}

public/sass/_hangman.scss

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

public/sass/_puzzleWord.scss

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

public/sass/index.scss

@@ -16,7 +16,7 @@ html, body {
 
 @mixin bodyFont() {
 
-    font-family: 'Raleway', sans-serif;
+    font-family: 'Rambla', sans-serif;
     font-weight: 400;
 }