img.profile-photo {
   width: 100%;
   height: auto;
   }

   .user-photo {
	width: 150px;
}

   .navbar__mode-change-button {
  position: relative; /* positioning context for absolute icons */
  width: 24px;        /* slight increase for padding */
  height: 24px;
  cursor: pointer;
}

.navbar__mode-change-button .icon-20 {
  position: absolute;
  top: 0; left: 0;
  width: 24px;
  height: 24px;
  transition: opacity 0.4s ease;
  user-select: none;
  pointer-events: none; /* prevent icons from blocking each other */
}

.navbar__mode-change-button .bi-brightness-low {
  opacity: 1;
  z-index: 2; /* sun icon on top in light mode */
}

.navbar__mode-change-button .bi-moon {
  opacity: 0;
  z-index: 1; /* moon below initially */
}

.site-html[data-bs-theme="dark"] .navbar__mode-change-button .bi-brightness-low {
  opacity: 0;
  z-index: 1;
}

.site-html[data-bs-theme="dark"] .navbar__mode-change-button .bi-moon {
  opacity: 1;
  z-index: 2;
}