@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
  font-family: 'Inter', sans-serif;
  background: 
    radial-gradient(circle at 20% 30%, rgba(76, 29, 149, 0.8) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.7) 0%, transparent 30%),
    linear-gradient(135deg, #1a0033 0%, #3a0068 30%, #5d00a3 70%, #8a2be2 100%);
  background-size: 200% 200%;
  animation: gradientFlow 15s ease infinite;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 15px 15px, 25px 25px, 40px 40px;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(90, 24, 154, 0.2) 0%, 
    rgba(123, 31, 162, 0.1) 20%, 
    transparent 50%, 
    rgba(74, 20, 140, 0.2) 100%);
  z-index: -1;
  pointer-events: none;
}
/* Snow effect */
#snow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000;
}

.snowflake {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(236, 72, 153, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(236, 72, 153, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(236, 72, 153, 0.7);
}
/* Animation for gradient text */
@keyframes gradientFlow {
  0% { background-position: 0% 0%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.floating-shape {
  position: fixed;
  opacity: 0.1;
  z-index: -1;
  animation: float 15s ease-in-out infinite;
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradientFlow 5s ease infinite;
}
.text-black {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  padding-bottom: 10px;
}

h1 {
  padding-bottom: 10px;
}