:root {
    --qb-slide-right-animation: slideRight ease 1s;
    --qb-slide-down-animation: slidenDown ease 1s;
    --qb-fade-in-left-animation: fadeInLeft ease 1s 1 normal forwards;
    --qb-fade-in-right-animation: fadeInRight ease 1s 1 normal forwards;
    --qb-pulse-heartbeat-animation: pulseHeartbeat 2s ease-in-out 0s infinite normal forwards;
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(5vh);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes backgroundMoveRight {
    0% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: 100%;
    }
}


@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-5vh);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pulseHeartbeat {
    0% {
        animation-timing-function: ease-out;
        transform: scale(1);
        transform-origin: center center;
    }

    10% {
        animation-timing-function: ease-in;
        transform: scale(0.91);
    }

    17% {
        animation-timing-function: ease-out;
        transform: scale(0.98);
    }

    33% {
        animation-timing-function: ease-in;
        transform: scale(0.87);
    }

    45% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }
}