body {
    overflow: hidden;
}

img {
    position: absolute;
    width: 130px;
}

@-webkit-keyframes fish1 {

    0% {
        top: 200px;
        left: -150px;
        transform: rotate(50deg);
    }

    15% {
        top: 190px;
        left: 100px;
        transform: rotate(100deg);
    }

    25% {
        top: 180px;
        left: 200px; 
        transform: rotate(120deg);
    }

    30% {
        top: 190px;
        left: 260px; 
        transform: rotate(120deg);
    }

    35% {
        top: 220px;
        left: 350px;
        transform: rotate(110deg);
    }

    45% {
        top: 250px;
        left: 530px;
        transform: rotate(113deg);
    }

    55% {
        top: 270px;
        left: 650px;
        transform: rotate(140deg);
    }

    65% {
        top: 300px;
        left: 700px;
        transform: rotate(180deg);
    }

    75% {
        top: 550px;
        left: 820px;
        transform: rotate(195deg);
    } 

    85% {
        top: 620px;
        left: 823px;
        transform: rotate(200deg);
    }

    100% { 
        top: 750px;
        left: 820px;
        transform: rotate(205deg);
    }
}

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

@-webkit-keyframes fish2 {

    0% {
        top: -10px;
        left: 400px;
        opacity: 0.7;
        transform: rotate(160deg);
    }

    10% {
        top: 100px;
        left: 390px;
        opacity: 1;
        transform: rotate(162deg);
    }

    15% {
        top: 180px
        left: 340px;
        opacity: 0.9;
        transform: rotate(160deg);
    }

    25% {
        top: 250px
        left: 300px;
        opacity: 0.6;
        transform: rotate(175deg);
    }

    30% {
        top: 320px
        left: 170px;
        opacity: 1;
        transform: rotate(180deg);
    }

    45% {
        top: 500px;
        left: 100px;
        opacity: 0.9;
        transform: rotate(190deg);
    }

    55% {
        top: 570px;
        left: 70px;
        opacity: 0.8;
        transform: rotate(180deg);
    }

    60% {
        top: 600px;
        left: 20px;
        opacity: 0.8;
        transform: rotate(180deg);
    }

    80% {
        top: 650px;
        left: 0px;
        opacity: 1;
        transform: rotate(190deg);
    }

    100% { 
        top: 670px;
        left: -150px;
        transform: rotate(180deg);
    }
}

#fish2 {
    -webkit-animation-name: fish2; 
    -webkit-animation-duration: 6s; 
    -webkit-animation-iteration-count: infinite; 
}

@-webkit-keyframes fish3 {

    0% {
        top: 350px; 
        left: 20px;
        opacity: 0.6;    
        transform: rotate(0deg);
    }

    10% {
        top:400px;
        left: 0px;
        opacity: 1;
        transform: rotate(-5deg);
    }

    20% {
        top:420px;
        left:-50px;
        opacity: 0.8;
        transform: rotate(-15deg);
    }

    30% {
        top: 450px;
        left: -150px;
        opacity: 1;
        transform: rotate(-50deg);
    }

    40% {
        top: 500px;
        left: -100px;
        opacity: 0.7;
        transform: rotate(-100deg);
    }

    50% {
        top: 510px;
        left: -5px;
        opacity: 0.8;
        transform: rotate(-110deg);
    }

    60% {
        top: 550px;
        left: 110px;
        opacity: 1;
        transform: rotate(-100deg);
    }

    70% {
        top: 590px;
        left: 200px;
        opacity: 0.8;
        transform: rotate(-115deg);
    }

    80% {
        top: 620px;
        left: 350px;
        opacity: 1;
        transform: rotate(-110deg);
    }

    90% {
        top: 720px;
        left: 450px;
        transform: rotate(-100deg);
    }

    100% { 
        top: 850px;
        left: 490px;
        transform: rotate(-80deg);
    }
}

#fish3 {
    -webkit-animation-name: fish3; 
    -webkit-animation-duration: 15s; 
    -webkit-animation-iteration-count: infinite; 
}

@-webkit-keyframes fish4 {

    0% {
        top: 750px;
        left: 1000px;
        transform: rotate(-5deg);
    }

    10% {
        top:700px;
        left: 940px;
        transform: rotate(-8deg);
    }

    20% {
        top:620px;
        left:900px;
        transform: rotate(-10deg);
    }

    30% {
        top: 580px;
        left: 890px;
        transform: rotate(-5deg);
    }

    40% {
        top: 500px;
        left: 820px;
        transform: rotate(0deg);
    }

    50% {
        top: 400px;
        left:810px;
        transform: rotate(1deg);
    }

    60% {
        top: 350px;
        left: 825px;
        transform: rotate(2deg);
    }

    70% {
        top: 200px;
        left: 807px;
        transform: rotate(-1deg);
    }

    80% {
        top: 160px;
        left: 800px;
        transform: rotate(5deg);
    }

    90% {
        top: 70px;
        left: 770px;
        transform: rotate(-11deg);
    }

    100% { 
        top: -130px;
        left: 710px;
        transform: rotate(-12deg);
    }
}

#fish4 {
    -webkit-animation-name: fish4; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: infinite; 
}

@-webkit-keyframes fish5 {

    0% {
        top: 500px;
        left: 500px;
        opacity: 1;
        transform: rotate(20deg);
    }

    10% {
        top:470px;
        left: 600px;
        opacity: 0.8;
        transform: rotate(-30deg);
    }

    20% {
        top:420px;
        left:550px;
        opacity: 1;
        transform: rotate(-50deg);
    }

    30% {
        top: 380px;
        left: 520px;
        opacity: 0.9;
        transform: rotate(-60deg);
    }

    40% {
        top: 350px;
        left: 460px;
        opacity: 1;
        transform: rotate(-70deg);
    }

    50% {
        top: 320px;
        left:390px;
        opacity: 0.7;
        transform: rotate(-95deg);
    }

    60% {
        top: 360px;
        left: 295px;
        opacity: 1;
        transform: rotate(-230deg);
    }

    70% {
        top: 400px;
        left: 330px;
        transform: rotate(-260deg);
    }

    80% {
        top: 460px;
        left: 400px;
        opacity: 0.9;
        transform: rotate(-285deg);
    }

    90% {
        top: 480px;
        left: 450px;
        transform: rotate(-300deg);
    }

    100% { 
        top: 500px;
        left: 500px;
        opacity: 1;
        transform: rotate(-330deg);
    }
}

#fish5 {
    -webkit-animation-name: fish5; 
    -webkit-animation-duration: 17s; 
    -webkit-animation-iteration-count: infinite; 
}

@-webkit-keyframes fish6 {

    0% {
        top: 160px;
        left: 1050px;
        opacity: 1;
        transform: rotate(20deg);
    }

    10% {
        top:190px;
        left: 900px;
        opacity: 0.8;
        transform: rotate(0deg);
    }

    20% {
        top:200px;
        left:860px;
        opacity: 1;
        transform: rotate(-10deg);
    }

    30% {
        top: 280px;
        left: 850px;
        opacity: 0.9;
        transform: rotate(-60deg);
    }

    40% {
        top: 340px;
        left: 960px;
        opacity: 1;
        transform: rotate(-100deg);
    }

    50% {
        top: 320px;
        left:1100px;
        opacity: 0.7;
        transform: rotate(-170deg);
    }

    60% {
        top: 200px;
        left: 1200px;
        opacity: 1;
        transform: rotate(-230deg);
    }

    70% {
        top: 120px;
        left: 1160px;
        transform: rotate(-270deg);
    }

    80% {
        top: 90px;
        left: 1140px;
        opacity: 0.9;
        transform: rotate(-330deg);
    }

    90% {
        top: 120px;
        left: 1100px;
        transform: rotate(-380deg);
    }

    100% { 
        top: 160px;
        left: 1050px;
        opacity: 1;
        transform: rotate(-360deg);
    }
}

#fish6 {
    -webkit-animation-name: fish6; 
    -webkit-animation-duration: 8s; 
    -webkit-animation-iteration-count: infinite; 
}