codepens/fishing-game/dist/style.css

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: radial-gradient(ellipse at center, #88c4c2 0%,#56838f 80%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game {
  display: flex;
  align-items: center;
  opacity: 1;
}

.fill-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ----------- */
/* Fishing rod */
/* ----------- */

.fishing-rod {
  width: 46px;
  height: 352px;
  position: relative;
  margin-right: 10px;
}

.reel-handle {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 81.2%;
  left: 1.8%;
  z-index: 10;
}

.reel-handle img {
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-duration: 0.35s;
  animation-timing-function: linear;
  transform-origin: 12px 2.5px;
  animation-play-state: paused;
}

@keyframes rotate {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}

.indicator-active .reel-handle img {
  animation-play-state: running;
}

.reel-line {
  width: 18px;
  height: 16px;
  position: absolute;
  top: 265px;
  left: 4px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-reel-loop.png') top left repeat-x;
  background-size: auto 100%;
  z-index: 5;
  animation-name: reel;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: paused;
  opacity: 0.3;
}

.indicator-active .reel-line {
  animation-play-state: running;
}

@keyframes reel {
  0% {background-position: 0;}
  100% {background-position: 139px}
}

.reel-line-tension {
  width: 42%;
  height: 13.5%;
  position: absolute;
  bottom: 26.8%;
  left: 29%;
  /* background: red;
  opacity: 0.5; */
}

/* --------- */
/* Game body */
/* --------- */

.game-body {
  width: 36px;
  height: 350px;
  position: relative;
}

.seafloor {
  position: relative;
  z-index: 5;
}

.seaweed {
  width: 94.5%;
  height: 19%;
  position: absolute;
  bottom: 4%;
  left: 3%;
  z-index: 10;
}

.bubbles {
  width: 94.5%;
  height: 95.2%;
  position: absolute;
  bottom: 4%;
  left: 2.7%;
  /* background: red;
  opacity: 0.5; */
}

.fish {
  width: 25px;
  height: 17px;
  position: absolute;
  top: calc(100% - 17px);
  left: 18%;
  opacity: 0.8;
  will-change: top;
}

.indicator {
  width: 34px;
  height: 46px;
  position: absolute;
  top: calc(100% - 46px);
  left: 3%;
  opacity: 0.8;
  z-index: 30;
}

.glass {
  z-index: 20;
}

/* ------------ */
/* Progress bar */
/* ------------ */

.progress-bar {
  width: 16px;
  height: 334px;
  position: relative;
  overflow: hidden;
}

.progress-gradient-wrapper {
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 15px;
  height: 100%;
  overflow: hidden;
  border-top-right-radius: 4px;
  will-change: height;
}

.progress-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15px;
  height: 332px;
  display: block;
}

/* ------- */
/* Success */
/* ------- */

.success {
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 100;
  opacity: 0;
  display: none;
  cursor: pointer;
}

.nice-catch {
  width: 100%;
  position: relative;
  z-index: 20;
}

.perfect {
  width: 46.743295%;
  margin-top: -4px;
  transform-origin: top;
  position: relative;
  z-index: 10;
}