/* CSS Variables */
:root {
  --accent-color: #32CD32;
  --accent2-color: #008F00;
  --accent3-color: #228B22;
  --accent4-color: #2E8B57;
  --primary-color: #4B0082;
  --dark-text-color: #333333;
  --gray-text-color: #777777;
  --button-padding-x: 16px;
  --button-padding-y: 10px;
  --font-family-body: Lato;
  --light-text-color: #F5F5F5;
  --dark-border-color: #4B0082;
  --light-border-color: #DDDDDD;
  --font-family-heading: Roboto;
  --button-rounded-radius: 12px;
  --dark-background-color: #2E2E2E;
  --light-background-color: #E6E6FA;
  --medium-background-color: #D8D8F0;
  --primary-button-text-color: #FFFFFF;
  --secondary-button-bg-color: #FFFFFF;
  --secondary-button-text-color: #4B0082;
  --primary-button-hover-bg-color: #3A0066;
  --primary-button-hover-text-color: #FFFFFF;
  --secondary-button-hover-bg-color: #F0F0F0;
  --secondary-button-hover-text-color: #4B0082;
}

/* Interactive Elements Highlighting */
.hovered-element {
  outline: #3871E0 dashed 2px;
}

.clicked-element {
  outline: #3871E0 solid 2px;
}

.clicked-code-section {
  border: #3B82F6 solid 2px;
}

/* Animations */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes slow-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animate-slow-zoom {
  animation: slow-zoom 20s ease-in-out infinite;
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.1); }
}

.animate-pulse-slow {
  animation: pulse-slow 6s ease-in-out infinite;
}

@keyframes float-1 {
  0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
  50% { transform: translateY(-30px) translateX(20px) rotate(10deg); }
}

@keyframes float-2 {
  0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
  50% { transform: translateY(-40px) translateX(-30px) rotate(-10deg); }
}

@keyframes float-3 {
  0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
  50% { transform: translateY(30px) translateX(25px) rotate(8deg); }
}

.animate-float-1 { animation: float-1 8s ease-in-out infinite; }
.animate-float-2 { animation: float-2 10s ease-in-out infinite; }
.animate-float-3 { animation: float-3 12s ease-in-out infinite; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fade-in-up 0.8s ease-out; }
.animate-fade-in-up-delay { animation: fade-in-up 0.8s ease-out 0.2s backwards; }
.animate-fade-in-up-delay-2 { animation: fade-in-up 0.8s ease-out 0.4s backwards; }
.animate-fade-in-up-delay-3 { animation: fade-in-up 0.8s ease-out 0.6s backwards; }