@keyframes preload {
    0% {
        background-color: var(--mainColor);
    }

    10% {
        background-color: var(--hoverColor);
    }

    50% {
        background-color: var(--hoverColor);
    }

    60% {
        background-color: var(--mainColor);
    }

    100% {
        background-color: var(--mainColor);
    }
}



@keyframes MoveOutView {
    0% {
        margin-bottom: var(--badgeMarginBottom);
        opacity: 1;
    }

    40% {
        opacity:0.3;
    }

    100% {
        opacity: 0;
        margin-bottom: var(--marginOut);
        display: none;
    }
}


@keyframes MoveInView {
    0% {
        opacity: 0;
        margin-bottom: var(--marginOut);
        display: none;
    }

    20% {
        opacity: 0.2;
    }

    100% {
        margin-bottom: var(--badgeMarginBottom);
        opacity: 1;
    }
}