/* Light mode styles (default) */
body {
  --bg-primary: #f9fafb;
  --bg-card: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #9ca3af;
  --text-accent: #4ade80;
  --shadow: rgba(0, 0, 0, 0.1);
  --hover-bg: #f3f4f6;
  --icon-color: #1f2937;
}

/* Dark mode styles */
body.dark-mode {
  --bg-primary: #111827;
  --bg-card: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #6b7280;
  --text-accent: #4ade80;
  --shadow: rgba(0, 0, 0, 0.5);
  --hover-bg: #374151;
  --icon-color: #f9fafb;
}

body {
  transition: background-color 0.3s ease;
  font-family: "Roboto", sans-serif;
}

.background {
  /* 1. Define the gradient (use 3+ colors for the best effect) */
  background: linear-gradient(-90deg, #08D9D6, #252A34, #FF2E63, #EAEAEA);
  
  /* 2. Make the background much larger than the element */
  background-size: 400% 400%;
  
  /* 3. Attach the animation */
  animation: gradientMove 15s ease infinite;
  
  /* Just for visibility */
  width: 100%;
  height: 100%;
}

/* 4. Define the movement logic */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body > div {
  background-color: var(--bg-primary) !important;
}

body > div > div {
  background-color: var(--bg-card) !important;
  box-shadow: 0 10px 15px -3px var(--shadow), 0 4px 6px -2px var(--shadow);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.name, .about, .experiences, .projects, .github-contribution, .blogs {
  color: var(--text-primary) !important;
  transition: color 0.3s ease;
}

.username {
  color: var(--text-secondary) !important;
  transition: color 0.3s ease;
}

.experience-card, .project-card, .blog-card {
  background-color: var(--bg-primary) !important;
  transition: background-color 0.3s ease;
}

.resume {
  transition: all 0.3s ease;
}

.resume:hover {  
  background-color: var(--bg-primary)!important;
  color: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
}

.accounts svg>path, .accounts div {
  transition: all 0.3s ease;
}

.accounts svg:hover>path{
  fill: var(--icon-color) !important;
  opacity: 0.8 !important;
}

.accounts div{
  transition: all 3s ease;
}

.accounts div:hover{
  color: rgb(214, 44, 214) !important;
  border-color: rgb(214, 44, 214) !important;
  filter: brightness(0) saturate(100%) invert(31%) sepia(74%) saturate(7158%) hue-rotate(288deg) brightness(107%) contrast(82%);
}

.projects svg>path {
  transition: all 0.3s ease;
}

.projects svg:hover>path {
  fill: rgb(214, 11, 214) !important;
}

#cursor-icon {
  position: fixed;
  width: 50px;
  height: auto;
  pointer-events: none;
  z-index: 9999;
  top: 0;
  left: 0;
  will-change: transform;

  image-rendering: -webkit-optimize-contrast; /* Sharper edges */
  background: transparent !important;
  opacity: 0.8 !important;
}

#themeToggle {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

#themeToggle:hover {
  background-color: var(--hover-bg) !important;
}

#themeToggle svg {
  color: var(--icon-color) !important;
  transition: color 0.3s ease;
}