.layer {
  position: absolute;
}



body {
   background-image: url("image.png");
  background-color: rgb(197, 217, 255);
  overflow-x: hidden;
  overflow-y:hidden;
}

.content {
  position: relative;
  height: 200px;
  width: 200px;

}

.scene {
  position: absolute;
  height: inherit;
}







.boat {
  animation: MoveUpDown 7s linear infinite;
  z-index:2;
  bottom:25vh;
  position:absolute;
  left:9vw;
}






/*---------water----------*/

.water {
 
  bottom: 0;
  position:absolute;
   z-index:1;
   max-height:30vh;
   animation: MoveUpDown 7s linear infinite;
}





/*----------trees---------*/


.foreground {
  animation: background-shift 60s linear infinite forwards;
  z-index:3;
}

.middleground {
  animation: background-shift 100s linear infinite forwards;
  z-index:-10;
}

.background {
  animation: background-shift 140s linear infinite forwards;
  z-index:-40;
}





@keyframes foreground-shift {
  to {
    transform: translateX(-900px);
  }
}

@keyframes background-shift {
  to {
    transform: translateX(-2300px);
  }
}

@keyframes middleground-shift {
  to {
    transform: translateX(-2800px);
  }
}



@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 30px;
  }
}