Update Frontend/style.css

Frontend/style.css

@@ -7,6 +7,11 @@ body {
   padding: 1rem;
 }
 
+body.light-mode {
+  background: #f0f0f0;
+  color: #222;
+}
+
 h1 {
   font-size: 2.7rem;
   margin-bottom: 1.2rem;
@@ -23,6 +28,7 @@ h1 {
   border: 4px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
   margin-bottom: 24px;
+  object-fit: cover;
 }
 
 .btn {
@@ -58,6 +64,26 @@ h1 {
   animation: bounce 1.2s ease infinite;
 }
 
+#toggleTheme {
+  background: linear-gradient(to right, #ff6a00, #ee0979);
+  color: #fff;
+  padding: 12px 24px;
+  border-radius: 40px;
+  font-size: 16px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 1rem;
+  box-shadow: 0 6px 12px rgba(255, 106, 0, 0.4);
+}
+
+#toggleTheme:hover {
+  background: linear-gradient(to right, #ee0979, #ff6a00);
+  box-shadow: 0 8px 18px rgba(238, 9, 121, 0.5);
+  transform: scale(1.05);
+}
+
 #emotionText {
   font-size: 1.3rem;
   margin-top: 1.2rem;
@@ -96,6 +122,10 @@ h1 {
   max-width: 420px;
   margin-top: 1.5rem;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 #snapshotCanvas {