Background, title

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fontsource/roboto": "^4.5.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/App.css

@@ -1,7 +1,20 @@
 .App {
-  background-image: '/public/background.png';
+  background:
+        linear-gradient(
+          rgba(0, 0, 0, 0.7), 
+          rgba(0, 0, 0, 0.7)
+        ),
+        url('background.png');
+  position: fixed;
+  min-width: 100%;
+  min-height: 100%;
+  background-size: cover;
+  background-position: center;
 }
 #title {
   text-align: center;
   margin-top: 3%;
+  font-family: "Roboto";
+  text-decoration: underline;
+  color: white;
 }

src/App.js

@@ -2,12 +2,14 @@ import logo from './logo.svg';
 import './App.css';
 import {AwesomeButton} from 'react-awesome-button';
 import "react-awesome-button/dist/styles.css";
-import roots from './roots.json'
+import data from './roots.json'
 
 function App() {
   return (
     <div className="App">
-      <h1 id="title">{roots.title}</h1>
+      <div id="bg"></div>
+      <h1 id="title">{data.title}</h1>
+      {}
     </div>
   );
 }

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import "@fontsource/roboto/500-italic.css";
 
 ReactDOM.render(
   <React.StrictMode>

yarn.lock

@@ -1177,6 +1177,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/roboto@^4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.1.tgz#63f7b783f755d8f6727eb60198627e7e1be3ac20"
+  integrity sha512-3mhfL+eNPG/woMNqwD/OHaW5qMpeGEBsDwzmhFmjB1yUV+M+M9P0NhP/AyHvnGz3DrqkvZ7CPzNMa+UkVLeELg==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"