From 861ddac39e4c824af4e048a369b86979beb98d9e Mon Sep 17 00:00:00 2001
From: Sumalatha Salapu <sumalathasalapu123@gmail.com>
Date: Mon, 28 Oct 2024 21:52:48 +0530
Subject: [PATCH 1/2] updated Word of The Day

---
 index.html | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index ec757e3..9ffb73f 100644
--- a/index.html
+++ b/index.html
@@ -1225,14 +1225,20 @@ <h2 class="accordion__question">How can I stay updated with new blog posts?</h2>
     </div>
 </section>
 <!-- Word of the Day Section -->
-<div id="word-of-the-day" style="background-color: rgb(248, 181, 181); padding: 20px; margin-right: 35px; border-radius: 5px; color: black;">
-    <h2>Word of the Day</h2>
-    <p id="word"></p>
-    <p id="definition"></p>
+<div id="word-of-the-day" style="border: 2px solid rgb(248, 181, 181); padding: 20px; border-radius: 5px; color: black; width: 90%; text-align: center; font-family: Arial, sans-serif; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-left: 60px; margin-bottom: 60px;">
+    
+    <h2 style="font-size: 1.5em; display: flex; justify-content: center; align-items: center; color: #242e4c; font-size: xx-large;">
+        Word of the Day
+    </h2>
+    <span style="font-size: 1.2em; margin-right: 8px;">📘</span>
+    <hr style="border: none; height: 1px; background-color: #333; margin: 10px auto; width: 80%; ">
+    <p id="word" style="font-weight: bold; font-size: 1.2em; color: #333; margin: 10px 0;">Placeholder Word</p>
+    <p id="definition" style="font-size: 1em; color: #555; margin: 10px 0;">Placeholder Definition</p>
 </div>
 
 
 
+
 <!-- Newsletter Section -->
 <section id="wordwise-newsletter" class="wordwise-newsletter-section">
   <div class="wordwise-newsletter-container">

From ccc52c20de32b4f945c9dcd4bfac7c8d7e310bdd Mon Sep 17 00:00:00 2001
From: Sumalatha Salapu <sumalathasalapu123@gmail.com>
Date: Mon, 28 Oct 2024 23:55:31 +0530
Subject: [PATCH 2/2] updated word-of-the-day

---
 index.html | 15 +++++-----
 style.css  | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 9ffb73f..321a53a 100644
--- a/index.html
+++ b/index.html
@@ -1224,21 +1224,20 @@ <h2 class="accordion__question">How can I stay updated with new blog posts?</h2>
         </div>
     </div>
 </section>
+
 <!-- Word of the Day Section -->
-<div id="word-of-the-day" style="border: 2px solid rgb(248, 181, 181); padding: 20px; border-radius: 5px; color: black; width: 90%; text-align: center; font-family: Arial, sans-serif; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-left: 60px; margin-bottom: 60px;">
+<div id="word-of-the-day">
     
-    <h2 style="font-size: 1.5em; display: flex; justify-content: center; align-items: center; color: #242e4c; font-size: xx-large;">
+    <h2>
         Word of the Day
     </h2>
-    <span style="font-size: 1.2em; margin-right: 8px;">📘</span>
-    <hr style="border: none; height: 1px; background-color: #333; margin: 10px auto; width: 80%; ">
-    <p id="word" style="font-weight: bold; font-size: 1.2em; color: #333; margin: 10px 0;">Placeholder Word</p>
-    <p id="definition" style="font-size: 1em; color: #555; margin: 10px 0;">Placeholder Definition</p>
+    <span>📘</span>
+    <hr>
+    <p id="word">Placeholder Word</p>
+    <p id="definition">Placeholder Definition</p>
 </div>
 
 
-
-
 <!-- Newsletter Section -->
 <section id="wordwise-newsletter" class="wordwise-newsletter-section">
   <div class="wordwise-newsletter-container">
diff --git a/style.css b/style.css
index 28307aa..83ed6dc 100644
--- a/style.css
+++ b/style.css
@@ -2449,14 +2449,84 @@ h1 {
   border: none;
 }
 
-/* Word of the Day Dark Mode Styles */
-[data-theme="dark"] #word-of-the-day,
-[data-theme="dark"] #word-of-the-day h2,
-[data-theme="dark"] #word-of-the-day #word,
+/* Light mode styles */
+#word-of-the-day {
+  border: 2px solid rgb(248, 181, 181);
+  padding: 20px;
+  border-radius: 5px;
+  color: black;
+  width: 90%;
+  text-align: center;
+  font-family: Arial, sans-serif;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-left: 60px;
+  margin-bottom: 60px;
+}
+
+/* Header style */
+#word-of-the-day h2 {
+  font-size: xx-large;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #242e4c;
+}
+
+/* Icon style */
+#word-of-the-day span {
+  font-size: 1.2em;
+  margin-right: 8px;
+}
+
+/* Divider line */
+#word-of-the-day hr {
+  border: none;
+  height: 1px;
+  background-color: #333;
+  margin: 10px auto;
+  width: 80%;
+}
+
+/* Word style */
+#word-of-the-day #word {
+  font-weight: bold;
+  font-size: 1.2em;
+  color: #333;
+  margin: 10px 0;
+}
+
+/* Definition style */
+#word-of-the-day #definition {
+  font-size: 1em;
+  color: #555;
+  margin: 10px 0;
+}
+
+/* Dark mode styles using [data-theme="dark"] */
+[data-theme="dark"] #word-of-the-day {
+  border: 2px solid #555;
+  color: #ddd;
+  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] #word-of-the-day h2 {
+  color: #ffffff; /* Brighter white for the header */
+}
+
+[data-theme="dark"] #word-of-the-day hr {
+  background-color: #888;
+}
+
+[data-theme="dark"] #word-of-the-day #word {
+  color: #e0e0e0; /* Light white for the word */
+}
+
 [data-theme="dark"] #word-of-the-day #definition {
-    color: black;
+  color: #e0e0e0; /* Slightly dimmer white for the definition */
 }
 
+/* 
+
 
 
 footer .text-lg {
@@ -3654,4 +3724,5 @@ nav1{
   .wordwise-footer-content {
     text-align: center;
   }
-}
\ No newline at end of file
+}
+