fixed feedback modal bug and added buy ebooks button in dark mode

assets/css/darkmode.css

@@ -507,16 +507,31 @@ body.nav-active {
 .feedback-button {
   position: fixed;
   left: 20px;
-  bottom: 20px;
+  bottom: 20px; /* Position for the Feedback button */
   background-color: #FF4D4D;
   color: white;
   padding: 15px;
   border-radius: 5px;
   cursor: pointer;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000;
+  z-index: 1000; /* Ensure it is on top */
+}
+
+.E-book-button {
+  position: fixed;
+  left: 20px;
+  bottom: 80px; /* Adjusted to be above the Feedback button */
+  background-color: #FF4D4D;
+  color: white;
+  padding: 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1001; /* Higher z-index to ensure it appears above */
 }
 
+
+
 .feedback-modal {
   display: none;
   position: fixed;
@@ -534,7 +549,7 @@ body.nav-active {
   background-color: #3C3C3C;
   padding: 20px;
   border-radius: 5px;
-  width: 300px;
+  width: 450px;
   text-align: center;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
@@ -544,6 +559,7 @@ body.nav-active {
   float: right;
   font-size: 28px;
   font-weight: bold;
+  display: flex;
 }
 
 .close:hover,
@@ -553,6 +569,7 @@ body.nav-active {
   cursor: pointer;
 }
 
+/* Styling for Emoji Section */
 .emojis {
   font-size: 30px;
   margin: 20px 0;
@@ -561,22 +578,31 @@ body.nav-active {
   justify-content: space-evenly;
 }
 
-.emoji {
+.emoji-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   cursor: pointer;
   margin: 0 10px;
   transition: transform 0.2s;
 }
 
-.emoji:hover {
+.emoji-option p {
+  margin-top: 5px;
+  font-size: 14px;
+  color: #ffffff;
+}
+
+.emoji-option:hover .emoji {
   transform: scale(1.2);
 }
 
 .emoji.selected {
-  border: 1px solid black;
-  /* Highlight selected emoji */
+  border: 2px solid #4caf50;
   border-radius: 5px;
 }
 
+/* Step Navigation Buttons */
 .buttons {
   display: flex;
   align-items: center;
@@ -588,7 +614,7 @@ input[type="email"] {
   width: 100%;
   padding: 10px;
   margin: 10px 0;
-  border: 1px solid #ccc;
+  border: 1px solid #ccc; 
   border-radius: 4px;
 }
 
@@ -601,14 +627,10 @@ button {
   cursor: pointer;
 }
 
-button:hover {
-  background-color: #45a049;
-}
-
-.feedbackPopUp {
+.feedbackRequestPopUps {
   position: fixed;
   transform: translate(120%);
-  transition: all 1s ease-in-out;
+  transition: all 0.1s ease-in-out;
   right: 20px;
   bottom: 100px;
   background-color: hsl(357, 100%, 75%);
@@ -620,12 +642,15 @@ button:hover {
   z-index: 1000;
 }
 
+button:hover {
+  background-color: #45a049;
+}
+
 .PopUpDisplay {
   transition: all 1.5s ease-in-out;
   transform: translate(0);
 }
 
-
 /*-----------------------------------*\
     #CATEGORY
   \*-----------------------------------*/