body {
}

/*@keyframes drop {
    0% {
        transform: translateY(-200px) scaleY(0.9);
        opacity: 0;
    }

    5% {
        opacity: 0.7;
    }

    50% {
        transform: translateY(0px) scaleY(1);
        opacity: 1;
    }

    65% {
        transform: translateY(-17px) scaleY(0.9);
        opacity: 1;
    }

    75% {
        transform: translateY(-22px) scaleY(0.9);
        opacity: 1;
    }

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

.drop {
    animation: drop 0.3s linear forwards var(--delay-time);
}*/


.hithere {
    transform: translate(-8px,-60px);
    animation: hithere 1s ease infinite;
}

@keyframes hithere {
    30% {
        transform: scale(1.2) translate(-8px,-60px);
    }

    40%, 60% {
        transform: rotate(-20deg) scale(1.2) translate(-8px,-60px);
    }

    50% {
        transform: rotate(20deg) scale(1.2) translate(-8px,-60px);
    }

    70% {
        transform: rotate(0deg) scale(1.2) translate(-8px,-60px);
    }

    100% {
        transform: scale(1) translate(-8px,-60px);
    }
}

.bounce-in {
    animation: bounce-in 2s ease infinite;
    transform: translate(-8px,-80px);
}

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(.3) translate(-8px,-80px);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translate(-8px,-80px);
    }

    70% {
        transform: scale(.9) translate(-8px,-80px);
    }

    100% {
        transform: scale(1) translate(-8px,-80px);
    }
}

.flip {
    backface-visibility: visible !important;
    animation: flip 2s ease infinite;
    transform: translate(-8px,-80px);
}

@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);        
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);        
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);        
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }

    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
    }
}

.pulse {
    animation: pulse 1s infinite ease-in-out alternate;
    transform: translate(-8px,-75px);
}

@keyframes pulse {
    from {
        transform: scale(0.8) translate(-8px,-75px);
    }

    to {
        transform: scale(1.2) translate(-8px,-75px);
    }
}

.flash {
    animation: flash 1000ms ease infinite alternate;
    transform: translate(-8px,-60px);
}

@keyframes flash {
    from {
        opacity: 1;
        transform: translate(-8px,-60px);
    }

    to {
        opacity: 0;
        transform: translate(-8px,-60px);
    }
}