:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #666666;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #333333;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #007c3c;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}
.mouse-trail {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #00ff88; /* Neon green */
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 8px #00ff88, 0 0 15px #00ff88;
  animation: fadeTrail 0.4s ease-out forwards;
  z-index: 9999;
}

@keyframes fadeTrail {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

.tech-item svg {
  width: 5rem;
}

#contactButton {
  height: 3rem;
  border-radius: 20px;
  padding: 1rem;
  background-color: var(--accent-color);
}