@keyframes backgroundColorShift {
    0% {background-color: #ff0000}
    25% {background-color: #b6cb50}
    50% {background-color: #0000ff}
    75% {background-color: #00ff00}
    100% {background-color: #ff0000}
}

@keyframes boxShadowShift {
    0% {box-shadow: 0 0 80px #ff0000}
    25% {box-shadow: 0 0 50px #b6cb50}
    50% {box-shadow: 0 0 10px #0000ff}
    75% {box-shadow: 0 0 500px #00ff00}
    100% {box-shadow: 0 0 90px #ff0000}
}

@keyframes colorShift {
    0% {color: #ff0000}
    25% {color: #b6cb50}
    50% {color: #0000ff}
    75% {color: #00ff00}
    100% {color: #ff0000}
}

@keyframes withShift {
    0% {width: 140px}
    25% {width: 120px}
    50% {width: 80px}
    75% {width: 100px}
    100% {width: 120px}
}

.font-animation {
   animation: colorShift 10s ease-in-out infinite;
}

.box-user {
    background-color: var(--card-data-bg) !important;
    box-shadow: 0 0 30px var(--accent-color);
    border-radius: 50px;
    padding: 10px;
    animation: boxShadowShift 10s ease-in-out infinite;
}

.bg-primary-custom {
    background-color: #10056b !important;
}