From 7af6c371b70fa57e0d5433288c45fff78fec041a Mon Sep 17 00:00:00 2001
From: l-yang-05 <40499685+l-yang-05@users.noreply.github.com>
Date: Thu, 10 Oct 2019 01:07:15 -0400
Subject: [PATCH] Changed css and added rules to start page

---
 src/App.css | 36 +++++++++++++++++++++++++++++++++---
 src/App.js  | 19 +++++++++++++------
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/App.css b/src/App.css
index cd95ba3..d88f483 100644
--- a/src/App.css
+++ b/src/App.css
@@ -46,17 +46,47 @@ input {
 }
 
 .container-start{
-  margin-top: 10%;
+  margin-top: 5%;
   text-align: center;
 }
 
 .container-start header{
   font-weight: bold;
-  font-size: 110px;
+  font-size: 80px;
+}
+
+.container-start h2{
+  font-size: 40px;
+  color:lemonchiffon;
+  margin: 0;
+}
+
+.container-start h3{
+  font-size: 36px;
 }
 
 .container-start p{
-  font-size: 50px;
+  font-size: 25px;
+}
+
+.difficulty{
+  margin-top:100px;
+  
+}
+
+.desc{
+  color: lemonchiffon;
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  justify-content: center;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.desc p{
+  font-size: 20px;
 }
 
 .container-score{
diff --git a/src/App.js b/src/App.js
index cbed6b9..c4e239f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -186,12 +186,19 @@ const App = () => {
   else {
     return (
       <div className="container-start">
-        <header className="Title_Start">Game Start</header>
-        <p>Select the difficulty:</p>
-        <form>
-          <button type='button' onClick={standard}>Standard</button>
-          <button type='button' onClick={expert}>Expert</button>
-        </form>
+        <header className="Title_Start">Number Guessing Game</header>
+        <h2 className="rules">Rules:</h2>
+        <p className="desc">
+          First, choose a difficulty! (Easy: 1-10; Hard: 1-100). Enter in a number to see if your guess was right. Keep on trying
+          to win and try beating your highscore! You can do it! :D
+        </p>
+        <div className="difficulty">
+          <h3>Select the difficulty:</h3>
+          <form>
+            <button type='button' onClick={standard}>Standard</button>
+            <button type='button' onClick={expert}>Expert</button>
+          </form>
+        </div>
       </div>
     );
   }