#bgContainer {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#background {
  height: 100%;
  width: 100%;
  background: radial-gradient(
    circle,
    rgba(238, 182, 71, 0.5) 1%,
    rgba(230, 88, 59, 0.5) 13%,
    rgba(239, 78, 123, 0.5) 26%,
    rgba(175, 104, 187, 0.5) 39%,
    rgba(65, 131, 203, 0.5) 52%,
    rgba(18, 157, 179, 0.5) 65%,
    rgba(7, 179, 155, 0.5) 77%,
    rgba(111, 186, 130, 0.5) 89%,
    rgba(172, 191, 85, 0.5) 98%
  );
  z-index: -1;
  animation: 1s backgroundWarp infinite;
}

@keyframes backgroundWarp {
  50% {
    transform: scale(5);
  }
}

#narwhal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50vh;
  width: 50vw;
}

#wavyFin {
  animation: 2s wavyFin infinite ease-in-out;
  transform-origin: 50px 100px;
}

#leftFin {
  animation: 1s leftFin infinite ease-in-out;
  transform-origin: 160px 120px;
}

#rightFin {
  animation: 1s rightFin infinite ease-in-out;
  transform-origin: 180px 120px;
}

@keyframes wavyFin {
  0%,
  100% {
    transform: rotate(0deg) translate(50px);
  }
  50% {
    transform: rotate(60deg) translate(70px);
  }
}
@keyframes leftFin {
  0%,
  100% {
    transform: rotate(-10deg) translatey(10px);
  }
  50% {
    transform: rotate(10deg) translatey(10px);
  }
}
@keyframes rightFin {
  0%,
  100% {
    transform: rotate(0deg) translatey(10px);
  }
  50% {
    transform: rotate(-20deg) translatey(10px);
  }
}

#star1 {
  animation: 1500ms rotateStar infinite linear;
  transform-origin: 33px 42px;
}

#star2 {
  opacity: 0;
  animation: 1500ms rotateStar infinite alternate;
  animation-delay: 1s;
  transform-origin: 35px 20px;
}

@keyframes rotateStar {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  40%,
  60% {
    opacity: 1;
  }
  50% {
    transform: rotate(360deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(720deg) scale(0);
  }
}