:root {
  --background-color-light: lightgray; /* light gray color */
  --background-color-dark: #1a1a1a; /* charcoal black color */
  --text-color-light: #black; /* black color */
  --text-color-dark: white; /* white color */
  --navbar-bg-light: white; /* white color */
  --navbar-bg-dark: black; /* black color */
  
}
#theme-toggle-button {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--navbar-bg-light);
  color: white !important;
  padding: 10px 20px; /* Adding padding to make the button larger and more clickable */
  border-radius: 20px; /* Rounded corners to give a modern, friendly appearance */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle box shadow for a "lifted" effect */
  border: none; /* Removes any default border */
  font-size: 16px; /* Increases font size for better visibility */
  cursor: pointer; /* Changes the cursor to a pointer when hovering over the button */
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* Smooth transition for background, color, and box-shadow */
}

#theme-toggle-button:hover {
  color: #007AFF !important;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Increases box shadow size on hover for a dynamic effect */
}

body {
  transition: background-color 0.3s, color 0.3s;
}

.light-theme {
  background-color: var(--background-color-light);
  color: var(--text-color-light);
}

.light-theme *, .light-theme img {
  background-color: inherit !important;
  color: inherit !important;
  border-color: var(--background-color-light) !important; /* Setting border color for images to match the light theme background */
}

.dark-theme {
  background-color: var(--background-color-dark);
  color: var(--text-color-dark);
}

.dark-theme *, .dark-theme img {
  background-color: inherit !important;
  color: inherit !important;
  border-color: var(--background-color-dark) !important; /* Setting border color for images to match the dark theme background */
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--navbar-bg-dark);
}

#theme-toggle-button {
  position: absolute;
  top: 10px;
  left: 1px;
  background-color: var(--navbar-bg-light);
  color: var(--text-color-dark);
}

.light-theme .navbar {
  background-color: var(--navbar-bg-light);
}

.light-theme #theme-toggle-button {
  background-color: var(--navbar-bg-dark);
  color: var(--text-color-light);
}