body {
  margin: 0;
  height: 100vh;
  background-image: url('images/coral-painting.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: sans-serif;
  overflow: hidden;
  cursor: url('images/fishing.rod.5.png') 50 50, auto;
}

.bubbles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bubble {
  position: absolute;
  bottom: -100px;
  opacity: 0.5;
  animation: rise 12s infinite ease-in;
  max-width: 25px;
}

.bubble:nth-child(1) { left: 5%;  width: 15px; animation-delay: 0s; animation-duration: 10s; }
.bubble:nth-child(2) { left: 15%; width: 20px; animation-delay: 3s; animation-duration: 12s; }
.bubble:nth-child(3) { left: 25%; width: 12px; animation-delay: 1s; animation-duration: 14s; }
.bubble:nth-child(4) { left: 35%; width: 18px; animation-delay: 5s; animation-duration: 11s; }
.bubble:nth-child(5) { left: 45%; width: 22px; animation-delay: 7s; animation-duration: 13s; }
.bubble:nth-child(6) { left: 55%; width: 15px; animation-delay: 2s; animation-duration: 15s; }
.bubble:nth-child(7) { left: 65%; width: 20px; animation-delay: 4s; animation-duration: 10s; }
.bubble:nth-child(8) { left: 75%; width: 18px; animation-delay: 6s; animation-duration: 14s; }
.bubble:nth-child(9) { left: 85%; width: 12px; animation-delay: 8s; animation-duration: 13s; }
.bubble:nth-child(10) { left: 95%; width: 15px; animation-delay: 1s; animation-duration: 12s; }


@keyframes rise {
  0% {
    transform: translateY(0);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-110vh);
    opacity: 0;
  }
}


.fish-name {
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  white-space: nowrap;
  will-change: transform;
}

.fish-name a {
  color: inherit;
  display: inline-block;
  text-decoration-line: inherit;
  text-decoration-style: inherit;
  text-decoration-color: inherit;
  text-decoration-thickness: inherit;

  transition: transform 220ms ease, text-shadow 220ms ease, color 220ms ease;
}


.fish-name a {
  color: inherit;
  display: inline-block;
  text-decoration: inherit;
  transition: transform 220ms ease, text-shadow 220ms ease, color 220ms ease;
}


.fish-name a:hover {
  transform: scale(1.12) rotate(-2deg);
  cursor: url('images/fishing.rod.hover.2.png') 50 50, pointer;
}

@keyframes swim {
  0%   { transform: translateX(-50px) translateY(0px); }
  25%  { transform: translateX(-25px) translateY(-10px); }
  50%  { transform: translateX(0px)   translateY(0px); }
  75%  { transform: translateX(25px)  translateY(10px); }
  100% { transform: translateX(50px)  translateY(0px); }
}

.arowana {
  top: 50px;
  left: 50px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  animation: swim 8s infinite alternate ease-in-out;
}

.arowana a {
  color: orange;
  text-decoration-line: underline overline;
  text-decoration-style: wavy;
  text-decoration-color: blanchedalmond;
  text-decoration-thickness: 1px;
  text-shadow: 2px 0 red, 4px 0 orange, 6px 0 yellow, 8px 0 green, 10px 0 blue, 12px 0 purple;
}

.betta {
  top: 500px;
  left: 900px;
  color: purple;
  text-decoration-line: overline;
  text-decoration-style: wavy;
  text-decoration-color: blue;
  text-decoration-thickness: 6px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  animation: swim 10s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 blue, 4px 0 magenta, 6px 0 cyan;
}

.cardinal {
  top: 80px;
  left: 850px;
  color: silver;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: black;
  text-decoration-thickness: 4px;
  font-size: 22px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 9s infinite alternate ease-in-out;
  text-shadow: 1px 0 red, 2px 0 orange, 3px 0 yellow, 4px 0 green, 5px 0 blue;
}

.dragonet {
  top: 250px;
  left: 100px;
  color: blue;
  text-decoration-line: underline overline;
  text-decoration-style: wavy;
  text-decoration-color: orange;
  text-decoration-thickness: 5px;
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  animation: swim 11s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 orange, 4px 0 yellow, 6px 0 cyan;
}

.electric-catfish {
  top: 250px;
  left: 500px;
  color: gray;
  text-decoration-line: line-through;
  text-decoration-style: wavy;
  text-decoration-color: yellow;
  text-decoration-thickness: 6px;
  font-size: 26px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 8.5s infinite alternate ease-in-out;
  text-shadow: 1px 0 yellow, 3px 0 orange, 5px 0 red;
}

.fantail {
  top: 200px;
  left: 300px;
  color: orange;
  text-decoration-line: underline overline;
  text-decoration-style: double;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 9.5s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 red, 4px 0 yellow, 6px 0 green, 8px 0 blue;
}

.glass-catfish {
  top: 300px;
  left: 900px;
  color: lightgray;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: darkblue;
  text-decoration-thickness: 4px;
  font-size: 22px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  animation: swim 9s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 white, 4px 0 silver;
}

.hatchetfish {
  top: 150px;
  left: 750px;
  color: lightblue;
  text-decoration-line: overline;
  text-decoration-style: wavy;
  text-decoration-color: lightblue;
  text-decoration-thickness: 4px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 8s infinite alternate ease-in-out;
  text-shadow: 2px 0 white, 4px 0 lightblue;
}

.iridescent-shark {
  top: 500px;
  left: 100px;
  color: silver;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: gray;
  text-decoration-thickness: 5px;
  font-size: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 12s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 gray, 4px 0 silver;
}

.jewel-cichlid {
  top: 50px;
  left: 1150px;
  color: teal;
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: gold;
  text-decoration-thickness: 5px;
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  animation: swim 9s infinite alternate ease-in-out;
  text-shadow: 2px 0 gold, 4px 0 teal;
}

.killifish {
  top: 270px;
  left: 700px;
  color: magenta;
  text-decoration-line: overline;
  text-decoration-style: wavy;
  text-decoration-color: pink;
  text-decoration-thickness: 4px;
  font-size: 22px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 10s infinite alternate-reverse ease-in-out;
  text-shadow: 1px 0 pink, 3px 0 magenta;
}

.lionhead {
  top: 100px;
  left: 500px;
  color: orange;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: darkorange;
  text-decoration-thickness: 5px;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 8.5s infinite alternate ease-in-out;
  text-shadow: 2px 0 darkorange, 4px 0 orange;
}

.moonyfish {
  top: 350px;
  left: 50px;
  color: lightgray;
  text-decoration-line: overline;
  text-decoration-style: wavy;
  text-decoration-color: white;
  text-decoration-thickness: 5px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 11s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 white, 4px 0 lightgray;
}

.neon-tetra {
  top: 50px;
  left: 300px;
  color: cyan;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 3px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 8s infinite alternate ease-in-out;
  text-shadow: 2px 0 blue, 4px 0 cyan;
}

.oscar {
  top: 200px;
  left: 1200px;
  color: darkorange;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: black;
  text-decoration-thickness: 6px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 9.5s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 red, 4px 0 orange, 6px 0 yellow;
}

.pictus {
  top: 400px;
  left: 1200px;
  color: silver;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: black;
  text-decoration-thickness: 3px;
  font-size: 22px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 10.5s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 black, 4px 0 gray, 6px 0 silver;
}

.rainbowfish {
  top: 350px;
  left: 850px;
  color: violet;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: gold;
  text-decoration-thickness: 5px;
  font-size: 26px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 8.5s infinite alternate ease-in-out;
  text-shadow: 2px 0 red, 4px 0 orange, 6px 0 yellow, 8px 0 green, 10px 0 blue, 12px 0 purple;
}

.swordtail {
  top: 100px;
  left: 100px;
  color: orange;
  text-decoration-line: overline;
  text-decoration-style: wavy;
  text-decoration-color: white;
  text-decoration-thickness: 5px;
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 11s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 orange, 4px 0 yellow, 6px 0 red;
}

.tinfoil-barb {
  top: 400px;
  left: 500px;
  color: gold;
  text-decoration-line: underline overline;
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 9s infinite alternate ease-in-out;
  text-shadow: 2px 0 red, 4px 0 orange, 6px 0 yellow, 8px 0 green;
}

.upside-down {
  top: 250px;
  left: 1000px;
  color: saddlebrown;
  text-decoration-line: underline overline;
  text-decoration-style: wavy;
  text-decoration-color: black;
  text-decoration-thickness: 5px;
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  animation: swim 10s infinite alternate-reverse ease-in-out;
  text-shadow: 2px 0 black, 4px 0 darkred, 6px 0 brown;
}