style.css

/* Scroll Button Styling */
.scroll-button {
  position: fixed;
  bottom: 30px;
  right: 35px;
  background-color: #e74c3c; /* Changed to a warmer red color */
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px; /* Slightly larger button */
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px; /* Larger icon */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease; /* Smoother transition */
  z-index: 1000; /* Ensure button stays on top */
}

/* Dark theme */
[data-theme="dark"] .scroll-button {
  background-color: #ff6b6b; /* Brighter red for dark theme */
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

/* Hover Effect */
.scroll-button:hover {
  background-color: #c0392b; /* Darker red on hover */
  transform: scale(1.15) translateY(-3px); /* More pronounced hover effect */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
}

/* Dark theme hover */
[data-theme="dark"] .scroll-button:hover {
  background-color: #ff8787; /* Lighter red on hover for dark theme */
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* Active State */
.scroll-button:active {
  transform: scale(0.95); /* Click effect */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Dark theme active */
[data-theme="dark"] .scroll-button:active {
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}

/* Show Button When Scrolled */
.scroll-button.show {
  opacity: 1;
  visibility: visible;
  animation: fadeInButton 0.5s ease-out; /* Smooth fade in animation */
}

/* Fade In Animation */
@keyframes fadeInButton {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}