edit App Component

src/App.css

@@ -1,22 +1,27 @@
-.App {
-  text-align: center;
+body {
+  background-color: #d9534f;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.title {
+  font-size: 60px;
+  font-weight: lighter;
+}
+
+.App {
+  text-align: center;
+  color: #131313;
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+  background-color: #d9534f;
   display: flex;
+  min-height: 20vh;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: calc(50px + 2vmin);
   color: white;
+  text-shadow: 0 0 2px #cf4242, 0 0 4px #2B2D1F;
 }
 
 .App-link {

src/App.js

@@ -6,8 +6,9 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-       <h1>tomadoro</h1>
-       
+       <div className="App-header title">
+        tomadoro
+      </div>
        <Timer />
       </div>
     );