/* Animate the login form */
@keyframes fadeSlideIn {
   0% {
      opacity: 0;
      transform: translateY(30px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

form.animated-login {
   animation: fadeSlideIn 0.6s ease-out;
   transition: box-shadow 0.3s ease;
   max-width: 400px;
   width: 90%;
   box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Stylish error alert inside form */
.alert-danger {
   background-color: #f8d7da;
   color: #721c24;
   border: 1px solid #f5c6cb;
   border-radius: 5px;
   font-size: 0.95rem;
   padding: 10px 15px;
   margin-bottom: 20px;
   animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}