/*
determines the animation played if you hover over an open mission
*/

@keyframes hoverOpen {
    0% {rotate: 10deg;}
    100% {rotate: -10deg;}
}

.hoverAnimation:hover {
    animation-name: hoverOpen;
    animation-duration: 1s;
    animation-delay: -0.5s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    
    animation-fill-mode: backwards;

    width: 7.5vw;
}

@media only screen and (min-width: 900px) and (min-device-width: 900px) {

    .hoverAnimation:hover {
        animation-name: hoverOpen;
        animation-duration: 1s;
        animation-delay: -0.5s;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        
        animation-fill-mode: backwards;

        width: 5.5vw;
    }
    
}

.hoverAnimation {
    transition: width 0.5s;
}

/*
determines the animation played once after a mission is done
*/

@keyframes doneDance {
    0% {rotate: 0deg;}
    50% {width: 8vw;}
    100% {rotate: 360deg;}
}


@media only screen and (min-width: 900px) and (min-device-width: 900px) {
    @keyframes doneDance {
        0% {rotate: 0deg;}
        50% {width: 5.5vw;}
        100% {rotate: 360deg;}
    }
}

.doneAnimation {
    animation-name: doneDance;
    animation-timing-function: ease-in-out;
    animation-duration: 1.5s;
}




/*
determines the animation played if you hover over the pass-button
*/


@keyframes passDance {
    0% {transform: translate(0px, 0px);}
    33% {transform: translate(1vw, 0px);}
    100% {transform: translate(0px, 0px);}
}



.passbutton:hover {
    animation-name: passDance;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    
 animation-fill-mode: backwards;
}