@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  min-height: 100vh;
  margin: 0;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #8b5cf6;
  cursor: pointer;
  border: 2px solid #0f172a;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #8b5cf6;
  cursor: pointer;
  border: 2px solid #0f172a;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.ambient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:
    radial-gradient(
      circle at 20% 80%,
      rgba(139, 92, 246, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
    circle at 80% 20%,
    rgba(59, 130, 246, 0.1) 0%,
    transparent 50%
  ),
    radial-gradient(
    circle at 40% 40%,
    rgba(168, 85, 247, 0.05) 0%,
    transparent 50%
  );
  animation: ambient-float 20s ease-in-out infinite;
}

@keyframes ambient-float {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

.glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}