* {
    --animationDuration: 0.3s;
}

.fadeOut {
    animation: fadeOut ease-in var(--animationDuration);
    background-color: var(--lightergrey);
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
        transform: translate(0%, -20%)
    }

    100% {
        opacity: 0;
        transform: translate(0%, -100%)
    }
}

.fadeIn {
    animation: fadeIn ease-in var(--animationDuration);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(0%, -100%);
        background-color: var(--lightergrey);
    }

    50% {
        opacity: 0.7;
        transform: translate(0%, -20%);
        background-color: var(--lightergrey);
    }

    100% {
        opacity: 1;
        transform: translate(0%, 0%);
        background-color: var(--contentContainerBackground);
    }
}

.shrink {
    animation: shrink ease-in var(--animationDuration);
    background-color: var(--lightergrey);

}

@keyframes shrink {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.8);
        background-color: var(--lightergrey);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.slideUp {
    animation: slideUp ease-in var(--animationDuration);
}

@keyframes slideUp {
    0% {
    }

    50% {
        transform: translate(0%, -20%)
    }

    100% {
        transform: translate(0%, -100%)
    }
}