body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  /* 禁止整个页面的文本选择 */
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

.menu {
  z-index: 3;
  position: relative;
  margin-bottom: 30px;
  font-size: 20px
}

.fishcontainer {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 15%;
  z-index: 0;
  left: -800px
}

.fishjump {
  cursor: pointer;
}

.fish {
  width: 20px;
  height: 40px;
  position: absolute;
  top: 40%;
}

.fish img {
  max-width: 160px;
}

.fishdx {
  width: 20px;
  height: 40px;
  position: absolute;
  top: 40%;
  right: 0;
}

.fishdx img {
  max-width: 160px;
}

.fondo {
  position: relative;
  z-index: 1;
}

.ocean {
  background-color: rgba(55, 155, 233, 1);
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.sotto {
  position: absolute;
  z-index: 0;
}

.testofake {
  position: relative;
  top: 0px
}


.jump.fishcontainer {
  -webkit-animation: spin 0.7s cubic-bezier(0, 0.27, 1, 0.68);
  -moz-animation: spin 0.7s cubic-bezier(0, 0.27, 1, 0.68);
  animation: spin 0.7s cubic-bezier(0, 0.27, 1, 0.68);
}

.jumpdx.fishcontainer {
  -webkit-animation: spindx 0.7s cubic-bezier(0, 0.27, 1, 0.68);
  -moz-animation: spindx 0.7s cubic-bezier(0, 0.27, 1, 0.68);
  animation: spindx 0.7s cubic-bezier(0, 0.27, 1, 0.68);
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(180deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(180deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}


@-moz-keyframes spindx {
  100% {
    -moz-transform: rotate(-180deg);
  }
}

@-webkit-keyframes spindx {
  100% {
    -webkit-transform: rotate(-180deg);
  }
}

@keyframes spindx {
  100% {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
}



/* Animation Simple CSS Waves Animation https://codepen.io/goodkatz/pen/YbXqEV*/

.waves {
  position: relative;
  display: block;
  width: 100%;
  height: 50px;
  margin: 0 0 -1px 0;
}

.parallax>use {
  animation: move-forever 50s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 14s;
}

.parallax.parallaxsopra>use:nth-child(1) {
  animation-delay: -3s;
  animation-duration: 20s;
}

.parallax.parallaxsopra>use:nth-child(2) {
  animation-delay: -4s;
  animation-duration: 26s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 40s;
}

@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

/*prevent many large-by-comparison ripples by shrinking the height*/

@media (max-width: 50em) {
  .waves {
    height: 17vw;
  }
}