/* Button animations */
.btn i {
    display: inline-block;
    margin-right: 8px;
    font-size: 18px;
    transition: transform 0.5s ease;
}

.btn:hover i {
    transform: rotate(360deg);
}

/* Rainbow gradient animation for active buttons */
@keyframes rainbow-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn:active {
    background: linear-gradient(90deg, #FE1C71, #F9AE42, #94F4E9, #D4F8AE, #FE1C71);
    background-size: 400% 400%;
    animation: rainbow-gradient 2s ease infinite;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: scale(0.97);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}