.waves {
      position: absolute;
      bottom: 50px;
      left: 0;
      height: 50vh;
      width: 100%;
      transition: bottom 2s ease;
    }

    .waves:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      bottom: -200px;
      height: 500px;
      background: dodgerblue;
    }

    .waves svg {
      position: absolute;
      bottom: 300px;
      left: 0;
    }

    .waves use {
      animation: wavewave 5s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
      fill: dodgerblue;
      opacity: 0.7;
    }

    .waves.back {
      z-index: 1;
    }

    .waves.back use:nth-child(2) {
      animation-delay: -4s;
      animation-duration: 13s;
    }

    .waves.back use:nth-child(3) {
      animation-delay: -5s;
      animation-duration: 20s;
    }

    .waves.front {
      z-index: 3;
    }

    .waves.front use:nth-child(2) {
      animation-delay: -2s;
      animation-duration: 7s;
    }

    .waves.front use:nth-child(3) {
      animation-delay: -3s;
      animation-duration: 10s;
    }

    @keyframes wavewave {
      0% {
        transform: translate(-90px);
      }

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

    @keyframes bob {
      0% {
        transform: rotate(-19deg) translateY(-9vh);
      }

      100% {
        transform: rotate(7deg) translateY(-12vh);
      }
    }

    @media (prefers-color-scheme: dark) {
      .waves:after {
        background: royalblue;
      }

      .waves use {
        fill: royalblue;
      }
    }

    .boat {
      position: absolute;
      bottom: 30px;
      left: 10%;
      z-index: 2;
      display: inline-block;
      transform-origin: center bottom;
      animation: bob 4s ease-in-out alternate infinite;
      transition: bottom 2s ease;
    }