.bag {
  width:30%;
}

/* from: */

.angler_fish {
  width: 300px;
  height: 217.5px;
  background-image: url("./angler_fish.png");
  animation: anglerPlayX 1s steps(4) infinite,
             anglerPlayY 4s steps(4) infinite;
}

@keyframes anglerPlayX {
  from {background-position-x: 0px;}
  to {background-position-x: -1200px;}
}

@keyframes anglerPlayY {
  from {background-position-y: 0px;}
  to {background-position-y: -870px;}
}


.puffer_fish {
  width: 270px;
  height: 256px;
  background-image: url("./puffer_fish.png");
  animation: pufferPlayX 1s steps(4) infinite,
             pufferPlayY 4s steps(4) infinite;
}

@keyframes pufferPlayX {
  from {background-position-x: 0px;}
  to {background-position-x: -1080px;}
}

@keyframes pufferPlayY {
  from {background-position-y: 0px;}
  to {background-position-y: -1024px;}
}


.white_shark {
  width: 400px;
  height: 244.66px;
  background-image: url("./light_blue_shark.png");
  animation: sharkPlayX 1s steps(4) infinite,
             sharkPlayY 4s steps(3) infinite;
}

@keyframes sharkPlayX {
  from {background-position-x: 0px;}
  to {background-position-x: -1600px;}
}

@keyframes sharkPlayY {
  from {background-position-y: 0px;}
  to {background-position-y: -734px;}
}


.hammerhead_shark {
  width: 400px;
  height: 205.75px;
  background-image: url("./hammerhead_shark.png");
  animation: hammerPlayX 1s steps(4) infinite,
             hammerPlayY 4s steps(4) infinite;
}

@keyframes hammerPlayX {
  from {background-position-x: 0px;}
  to {background-position-x: -1600px;}
}

@keyframes hammerPlayY {
  from {background-position-y: 0px;}
  to {background-position-y: -823px;}
}