/* Styles généraux */
body {
  background: linear-gradient(-45deg, #1a5e4c, #2ecc71, #3498db, #16a085);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Pour s'assurer que le footer est en bas de la page */
main {
  flex: 1;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

.floating-icon {
  position: absolute;
  z-index: -1;
  color: rgba(255, 255, 255, 0.3);
  text-shadow: none;
  pointer-events: none;
}

.avatar {
  background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1, h2, h3, h4, h5, h6, p {
  color: #FFFFFF;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

footer p {
  color: #FFFFFF;
  text-shadow: none;
  font-size: 1rem;
}

header h1, header p {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Ajustement des marges pour une meilleure répartition */
header {
  margin-top: 20px;
}

main .animate-pulse {
  margin-top: 20px;
}