From 4bd7ab6bdd73a255d25e1f19cb0df45516d86fd4 Mon Sep 17 00:00:00 2001
From: rbozek <rbozek@gmail.com>
Date: Thu, 4 Jan 2024 21:31:59 -0500
Subject: [PATCH] add basic button styling

---
 css/style.css    | 20 +++++++++++++++++++-
 index.html       | 11 ++++++-----
 js/pseudocode.js |  3 ++-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index 05c06c3..34b902a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,8 +11,14 @@ body {
 
 .generic-background {
   background-color:  rgba(53, 53, 53, 0.75);
+  color:#fff;
   padding: 20px;
   border-radius: 10px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 550px;
 }
 
 h1, h2 {
@@ -31,7 +37,7 @@ div#rules-div {
 }
 
 div#question-container {
-  background-color: rgb(255, 5, 5);
+  background-color:  rgba(19, 19, 19, 1);
   max-width: 450px;
 }
 
@@ -51,3 +57,15 @@ div#player-score {
   background-color: rgb(66, 255, 211);
 }
 
+button {
+  display: inline-block;
+  margin: 4px 8px;
+  padding: 8px 8px;
+  /* font-size: 16px; */
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
diff --git a/index.html b/index.html
index 24bfded..14e4f2f 100644
--- a/index.html
+++ b/index.html
@@ -17,12 +17,13 @@ <h2>Get through life without looking dumb (or dying)</h2>
 
   <div class="generic-background" id="game-container">
     <div id="rules-btns-container">
-      <div id="rules-div">"TESTING AT 8:25"<br>
-      Choose category to begin!</div>
+      <div id="rules-div">Being a good person doesn't have to be a pretentious sweater you show off - all it takes is paying attention to the little details in life.<br>
+      Take this quiz to find out if you're a solid human.<br>
+      Choose category to begin:</div>
       <div id="buttons-container">
-        <button class="button" id="btn-category-1">Category 1</button>
-        <button class="button" id="btn-category-2">Category 2</button>
-        <button class="button" id="btn-category-3">Category 3</button>
+        <button class="button" id="btn-category-1">Communication/Interaction</button><br>
+        <button class="button" id="btn-category-2">Survival/Life Hacks</button><br>
+        <button class="button" id="btn-category-3">Impact on the world</button><br>
       </div>
     </div> 
 
diff --git a/js/pseudocode.js b/js/pseudocode.js
index 3e0964a..c54ca2d 100644
--- a/js/pseudocode.js
+++ b/js/pseudocode.js
@@ -33,12 +33,13 @@
 // // timer for entire category, not each question
 // // ** sounds: sound for button clicks, add sound for playerScore, and diff sound for perfect score  ->  button to turn off sounds??
 
-// fix timer issue!
+// // fix timer issue!
 // fonts! (quick)
 // ** images: favicon to page DONE, monk image for top of page before game starts
     // Put rules & category buttons on top of meditate image
     // flexbox layout adjust!
     // have score, timer, and reset game buttons appear once game starts
+  // mouse pointer, li mouse selects whole thing
 
 // README! can use "badges" for technology used & credits (inside Course SUpplements > GitHub Beautifuication (2nd link has nicer looking ones)
 // .gitignore or .env for dead code!