Hangman and Current score done

public/css/index.css

@@ -0,0 +1,34 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  border-bottom: 1px solid #c8c8c8;
+  height: 10vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+header h1 {
+  font-family: "Raleway", sans-serif;
+  font-weight: bold;
+  user-select: none;
+  margin: 0;
+}
+header h2 {
+  font-family: "Raleway", sans-serif;
+  font-weight: bold;
+  user-select: none;
+  margin: 0;
+  color: #48a6fd;
+  margin-top: 0.5vh;
+  cursor: pointer;
+}
+
+.hangman img {
+  width: 20vw;
+}
+
+/*# sourceMappingURL=index.css.map */

public/css/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_hangman.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACrBJ;EACI","file":"index.css"}

public/index.html

@@ -8,6 +8,11 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="./css/index.css">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/sass/_app.scss

@@ -0,0 +1,5 @@
+@import 'hangman';
+
+.app {
+    
+}

public/sass/_hangman.scss

@@ -0,0 +1,5 @@
+.hangman {
+    img {
+        width: 20vw;
+    }
+}

public/sass/_header.scss

@@ -0,0 +1,25 @@
+header {
+    border-bottom: 1px solid rgb(200, 200, 200);
+
+    height: 10vh;
+
+    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;
+    }
+}

public/sass/index.scss

@@ -0,0 +1,24 @@
+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: 'Raleway', sans-serif;
+    font-weight: 400;
+}
+
+@import 'header';
+@import 'app';