.fade-component {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    visibility: hidden;
}

.fade-component.show {
    opacity: 1;
    visibility: visible;
}

@keyframes highlight-item {
    0% {
        background-color: rgba(219, 234, 254, 0.8);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    50% {
        background-color: rgba(219, 234, 254, 0.8);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    100% {
        background-color: transparent;
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
}

.zoom-out-text {
    animation: zoom-out-text-animation .4s;
}

@keyframes zoom-out-text-animation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    70% {
        transform: scale(1.4);
        opacity: 0;
    }

    71% {
        transform: scale(1);
    }

    100% {
        opacity: 1;
    }
}

.blurry-gradient-red {
    background: rgb(218,31,113);
    background: radial-gradient(circle, rgba(218,31,113,1) 0%, rgba(218,31,113,0) 64%);
    filter: blur(100px);
}

.blurry-gradient-blue {
    background: rgb(40,95,210);
    background: radial-gradient(circle, rgba(40,95,210,1) 0%, rgba(40,95,210,0) 64%);
    filter: blur(100px);
}

.blurry-gradient-yellow {
    background: rgb(40,95,210);
    background: radial-gradient(circle, rgba(250,226,17,1) 0%, rgba(250,226,17,0) 64%);
    filter: blur(100px);
}

.blurry-gradient-teal {
    background: rgb(97,222,255);
    background: radial-gradient(circle, rgba(97,222,255,1) 0%, rgba(97,222,255,0) 64%);
    filter: blur(100px);
}

.radial-gradient-white {
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 46%);
}