body {
    overflow: hidden;
}

img, a.fish {
    position: absolute;
    width: 150px;

}

@-webkit-keyframes fish1 {

    0% {
        top: 460px;
        left: -50px;
        opacity: 1;
        transform: rotate(90deg);
    }

    15% {
        top: 430px;
        left: 40px;
        opacity: 1;
        transform: rotate(85deg);
    }

    35% {
        top: 400px;
        left: 200px;
        opacity: 1;        
        transform: rotate(90deg);
    }

    45% {
        top: 300px;
        left: 300px;
        opacity: 1;        
        transform: rotate(90deg);
    }

    65% {
        top: 200px;
        left: 450px;
        opacity: 1;        
        transform: rotate(80deg);
    }

    75% {
        top: 100px;
        left: 510px;
        opacity: 1;        
        transform: rotate(75deg);
    } 

    85% {
        top: 40px;
        left: 540px;
        opacity: 1;        
        transform: rotate(60deg);
    } 

    100% { 
        top: -150px;
        left: 680px;
        opacity: 1;        
        transform: rotate(55deg);
    }
}

#fish1 {
    width: 150px;
    -webkit-animation-name: fish1; /* Uses the name of the animation above to apply it to an element. */
    -webkit-animation-duration: 5s; /* Speed of animation. */
    -webkit-animation-iteration-count: infinite; /* The animation will repeat forever. */
}


/* Generic Fish */

@-webkit-keyframes fish2 {
    0% {
        left: -130vw;
        opacity: 1;
        transform: rotate(290deg);
    }

    40% {
        left: 13vw;
        opacity: 1;        
        transform: rotate(290deg); 
    }

    60% {
        left: 43vw;
        opacity: 1;        
        transform: rotate(290deg); 
    }

    70% {
        left: 50vw;
        opacity: 1;        
        transform: rotate(290deg); 
    }

    90% {
        left: 75vw;
        opacity: 1;        
        transform: rotate(290deg); 
    }

    100% {
        left: 100vw;
        opacity: 1;        
        transform: rotate(290deg);  
    }
}
#fish2 {
        width: 100px;
        top: 55vh;
        -webkit-animation-transform: rotate(0deg); /* Flip the fish horizontally and make it a bit larger. */
        -webkit-animation-name: fish2; /* Same animation as above - except on the line below I specify that I play it in reverse. */
        -webkit-animation-direction: reverse;
        -webkit-animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes fish3 {
    0% {
        top: 170px;
        left: 1120px;
        opacity: 1;
        transform: rotate(60deg);
    }

    10% {
        top: 170px;
        left: 1120px;
        opacity: 1;        
        transform: rotate(120deg); 
    }

    20% {
        top: 170px;
        left: 1120px;
        opacity: 1;        
        transform: rotate(50deg); 
    }

    50% {
        top: 170px;
        left: 1120px;
        opacity: 1;        
        transform: rotate(100deg); 
    }

    60% {
        top: 170px;
        left: 1120px;
        opacity: 1;        
        transform: rotate(40deg); 
    }

    70% {
        top: 170px;
        left: 1120px;
        opacity: 1;        
        transform: rotate(90deg); 
    }

    80% {
        top: 170px;
        left: 1120px;
        opacity: ;        
        transform: rotate(115deg);  
        opacity: 1;
    }

    90% {
        top: 170px;
        left: 1120px;
        opacity: ;        
        transform: rotate(90deg);  
        opacity: 1;
    }    

    100% {
        top: 170px;
        left: 1120px;
        opacity: ;        
        transform: rotate(60deg);  
        opacity: 1;
    }    
}


#fish3 {
        width: 40px;
        -webkit-animation-name: fish3; 
        -webkit-animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
}  

a :hover {
        opacity: 0.1;
}