.fish {
    position: absolute;
    width: auto;
    height: auto;
    z-index: -1;
    top: 0px;
    left: 0px;
}

#johnandjohn {
    top: 60vh;
    left: -130px;
    width: 10%;
    animation: johnandjohn 20s linear infinite;
}

@keyframes johnandjohn {
    0% {
        transform: translateX(0)
    }

    60% {
        transform: translateX(calc(100vw + 130px))
    }

    100% {
        transform: translateX(calc(110vw + 130px))
    }
}

#saoirse {
    top: 30vh;
    left: -86px;
    animation: saoirseHorizontal 20s infinite linear;
    animation-delay: -3s;
}

#saoirse>img {
    animation: saoirseVertical 1.5s alternate infinite ease-in-out;
}

@keyframes saoirseVertical {
    to {
        transform: translatey(100px);
    }
}

@keyframes saoirseHorizontal {
    to {
        transform: translatex(calc(100vw + 86px));
    }
}

#bob {
    top: 1000px;
    left: 50vw;
}

#faye {
    top: 50px;
    left: 100vw;
    animation: faye 15s forwards cubic-bezier(.47,0,.74,.71);
    animation-delay: 60s;
}

@keyframes faye {
    to {
        transform: translatey(40vw) translatex(-160vw) scale(10)
    }
}


@keyframes swim {
    0% {
        transform: translateX(0) scaleX(1);
    }

    50% {
        transform: translateX(80vw) scaleX(1);
    }

    51% {
        transform: translateX(80vw) scaleX(-1);
    }

    /* flip */
    100% {
        transform: translateX(0) scaleX(-1);
    }
}

.fish {
    display: none !important;
}