Added hover effect

style.css

@@ -203,27 +203,50 @@ html {
 }
 
 button#dark-mode-toggle {
-    background-image: url('assets\images\dark-mode.png');
+    background-image: url('assets/images/dark-mode.png');
     background-color: transparent;
     background-size: cover;
     position: fixed;
     top: 5.5px;
     right: 16px;
     border: none;
     padding: 10px;
+    outline: none;
     cursor: pointer;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     z-index: 999;
     margin-top: 4px;
 }
+/* highlights the icon */
 button#dark-mode-toggle:hover {
-    transform: scale(1.2); /* Scale up the button */
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Enhance shadow for a 3D effect */
+    transform: scale(1.2); 
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); 
+}
+
+button#dark-mode-toggle:hover {
+    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5), 
+                0 0 20px 10px rgba(255, 255, 255, 0.3);
+    animation: shine 1.5s infinite ease-in-out;
+}
+/* Keyframes for glowing animation */
+@keyframes shine {
+    0% {
+        box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5), 
+                    0 0 20px 10px rgba(255, 255, 255, 0.3);
+    }
+    50% {
+        box-shadow: 0 0 15px 10px rgba(255, 255, 255, 0.7), 
+                    0 0 30px 15px rgba(255, 255, 255, 0.4);
+    }
+    100% {
+        box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5), 
+                    0 0 20px 10px rgba(255, 255, 255, 0.3);
+    }
 }
 .dark-mode button#dark-mode-toggle {
-    background-image: url('assets\images\dark-mode.png');
+    background-image: url('assets/images/dark-mode.png');
     background-color: transparent;
     background-size: cover;
 }