/* style.css */

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

.line-colour-mix {
    height: 4px;
    background: linear-gradient(90deg, #d100c1, #7800ff);
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
    border-radius: 2px 2px 0 0;
}
            
    
.botton-colour-mix {
    background: linear-gradient(90deg, #d100c1, #7800ff);
    background-size: 200% 200%;
    animation: gradientAnimation 3s ease infinite;
}

.card-colour {
  background-color: #ffd7fe;
}

.Large-text {
  font-size: 1.1rem; /* equivalent to text-xs in Tailwind */
}

.short-text {
  font-size: 0.75rem; /* equivalent to text-xs in Tailwind */
}

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

.text-gradient-animated {
    background: linear-gradient(90deg, #d100c1, #7800ff);
    background-size: 200% 200%;
    animation: gradientAnimation 3s ease infinite;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

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