/* the animation.css file contains animations - reference animation.js for javascript animations */
/*PROFILE PICTURE ANIMATION*/
.bounce {
    animation: bounce 2s ease 0s 1 normal forwards;
}

@keyframes bounce {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translateY(-250px);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0);
    }

    55% {
        animation-timing-function: ease-in;
        transform: translateY(-65px);
    }

    72% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    81% {
        animation-timing-function: ease-in;
        transform: translateY(-28px);
    }

    90% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    95% {
        animation-timing-function: ease-in;
        transform: translateY(-8px);
    }

    100% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }
}

/* IMAGE CONTAINER */
.image-container:hover .flip {
    transform: rotateY(180deg);
}

.image-container:hover { /* animation - transition in .image-container */
    box-shadow: 0 0 5rem rgba(238, 187, 195, 1);
}

.flip-container:hover .flip {
    transform: rotateY(180deg);
}

/*HEARTBEAT ANIMATION*/
.heartbeat{
    animation: heartbeat 1.5s linear infinite
}

@keyframes heartbeat {
    0% {
        transform:scale(1);
        animation-timing-function:ease-out;
    }
    25% {
        transform:scale(.90);
        animation-timing-function:ease-in;
    }
    50% {
        transform:scale(1);
        animation-timing-function:ease-out;
    }
    75% {
        transform:scale(.90);
        animation-timing-function:ease-in;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}