/* style_fish.css */

#fishbg {
    /* source: https://opengameart.org/content/animated-water-texture-128px */
    background-image: url('../assets/img/fish/water.gif'), url('../assets/img/fish/seafoam2d.gif');
    background-repeat: repeat, repeat-x;
    background-size: 25vw, 45vw;
    background-blend-mode: soft-light;
}


#modalfish{
    display: block;
}


#coral{
    position: absolute;
    width: 100vw;
    height: 32vw;
    top: 24vw;
}

#coral2{
    position: absolute;
    width: 100vw;
    top: 45vw;
    pointer-events: none;
}

#coral3{
    position: absolute;
    width: 35vw;
    top: 5vw;
    left: -10vw;
}

#coral4{
    position: absolute;
    width: 35vw;
    top: 0vw;
    left: 77vw;
    opacity: 0.9;
}

#seaweed1{
    position: absolute;
    width: 15vw;
    height: 20vw;
    top: 21vw;
    left: 67vw;
}

#seaweed2{
    position: absolute;
    width: 18vw;
    height: 30vw;
    top: 26vw;
    left: 11vw;
    pointer-events: none;
}

#crab{
    position: absolute;
    width: 19vw;
    left: 57vw;
    top: 31.4vw;
}

#rock{
    position: absolute;
    width: 35vw;
    top: 23vw;
    left: 19vw;
}

#bubbles{
    position: absolute;
    width: 6vw;
    top: -20vw;
    left: 10vw;
    opacity: 0.8;
    pointer-events: none;
}

#bubbles2{
    position: absolute;
    width: 4vw;
    top: 0vw;
    left: 60vw;
}






.fish{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: -12vw;
}

.fish::before{
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    border: 1px solid rgb(178, 178, 178);
}

.fish::after{
    content: attr(data-name);
}

@keyframes fish-flip {
    0%, 50% { transform: scaleX(1); }
    51%, 99% { transform: scaleX(-1); }
}

@keyframes fishanim{
    0%{ transform: translate(0, 0);
        left: -12vw;}

    15%{ transform: translate(0, -4vw);}
    35%{ transform: translate(0, 3vw);}

    50%{transform: translate(0, 0);
        left: 100vw;}
    51%{transform: translate(0, 0);}
    
    65%{ transform: translate(0, -3vw);}
    85%{ transform: translate(0, 4vw);}

    100%{transform: translate(0, 0);
        left: -12vw;}
}

#fish1::before{
    background-image: url('../assets/img/fish/fish1.gif');
    width: 12vw;
    height: 6vw;
    animation: fish-flip 20s linear infinite;
}

#fish1{
    top: 10vw;
    animation: fishanim 20s linear infinite;
}

#fish1:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#fish1:hover::before{
    animation-play-state: paused;
}

#fish2::before{
    background-image: url('../assets/img/fish/fish2.gif');
    width: 10vw;
    height: 5vw;
    animation: fish-flip 20s linear infinite;
    animation-delay: -2s;
}

#fish2{
    top: 40vw;
    animation: fishanim 20s linear infinite;
    animation-delay: -2s;
}

#fish2:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#fish2:hover::before{
    animation-play-state: paused;
}

#fish3::before{
    background-image: url('../assets/img/fish/fish3.gif');
    width: 10vw;
    height: 6vw;
    animation: fish-flip 20s linear infinite;
    animation-delay: -10s;
    animation-direction: reverse;
}

#fish3{
    top: 30vw;
    animation: fishanim 20s linear infinite;
    animation-delay: -10s;
}

#fish3:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#fish3:hover::before{
    animation-play-state: paused;
}

#fish4::before{
    background-image: url('../assets/img/fish/fish4.gif');
    width: 9vw;
    height: 6vw;
    animation: fish-flip 13s linear infinite;
    animation-delay: 2s;
    animation-direction: reverse;
}

#fish4{
    top: 15vw;
    animation: fishanim 13s linear infinite;
    animation-delay: 2s;
}

#fish4:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#fish4:hover::before{
    animation-play-state: paused;
}

#fish5::before{
    background-image: url('../assets/img/fish/fish5.gif');
    width: 9vw;
    height: 6vw;
    animation: fish-flip 28s linear infinite;
    animation-delay: -8s;
}

#fish5{
    top: 1vw;
    animation: fishanim 28s linear infinite;
    animation-delay: -8s;
}

#fish5:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#fish5:hover::before{
    animation-play-state: paused;
}

#fish6::before{
    background-image: url('../assets/img/fish/fish6.gif');
    width: 9vw;
    height: 3vw;
    animation: fish-flip 17s linear infinite;
    animation-delay: -4s;
    animation-direction: reverse;
}

#fish6{
    top: 47vw;
    animation: fishanim 17s linear infinite;
    animation-delay: -4s;
}

#fish6:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#fish6:hover::before{
    animation-play-state: paused;
}

#fish7::before{
    background-image: url('../assets/img/fish/jellyfish.gif');
    width: 8vw;
    height: 8vw;
}

#fish7{
    animation: jellyfishanim 17s linear infinite;
}

#fish7:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#fish7:hover::before{
    animation-play-state: paused;
}

@keyframes jellyfishanim{
    0%{top:55vw; left: 48vw;}
    100%{top:-15vw; left: 29vw;}
}


#fish0::before{
    background-image: url('../assets/img/fish/fish0.gif');
    width: 5vw;
    height: 3vw;
    animation: fish-flip 35s linear infinite;
    animation-delay: 10s;
}

#fish0{
    top: 25vw;
    animation: fishanim 35s linear infinite;
    animation-delay: 10s;
}

#fish0:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#fish0:hover::before{
    animation-play-state: paused;
}

#modal-contentfish{
    padding-bottom: 1.2vw;
    width: 27vw;
}

#fish8::before{
    background-image: url('../assets/img/fish/fish8.gif');
    width: 10vw;
    height: 7vw;
    animation: fish-flip 22s linear infinite;
    animation-delay: -15s;
}

#fish8{
    top: 20vw;
    animation: fishanim 22s linear infinite;
    animation-delay: -15s;
}

#fish8:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#fish8:hover::before{
    animation-play-state: paused;
}

#carrot::before{
    background-image: url('../assets/img/fish/carrotd.gif');
    width: 6vw;
    height: 6vw;
    animation: fish-flip 40s linear infinite;
    animation-delay: 60s;
}

#carrot{
    top: 35vw;
    animation: fishanim 40s linear infinite,
    delay-animation 80s linear infinite;
    animation-delay: 60s;
}

#carrot:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#carrot:hover::before{
    animation-play-state: paused;
}

@keyframes delay-animation {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    50.01% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

#carrotgone::before{
    width: 6vw;
    height: 6vw;
    animation: fish-flip 40s linear infinite;
    animation-delay: 60s;
}

#carrotgone{
    top: 35vw;
    animation: fishanim 40s linear infinite,
    delay-animation 80s linear infinite;
    animation-delay: 60s;
}

#carrotgone:hover{
    cursor: pointer;
    animation-play-state: paused;
}

#carrotgone:hover::before{
    animation-play-state: paused;
}