body {
  margin: 0;
  background-image: url("sky.png");
  background-repeat: repeat-x;
  background-color: #bde4f9;
  -webkit-animation: marquee-bg 8s infinite linear;
}

.boat {
  -webkit-animation:        rock-boat 3s ease-in-out infinite;
  -moz-animation:    rock-boat 3s ease-in-out infinite;
  -mt-animation:     rock-boat 3s ease-in-out infinite;
  -o-animation:      rock-boat 3s ease-in-out infinite;
}

#center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes marquee-bg {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: -1920px 0px;
  }
}

@-webkit-keyframes rock-boat {
  0%{
      transform: rotate(0) translateY(0);
  }
  50% {
      transform: rotate(-20deg) translateY(-30px);
  }
  100% {
      transform: rotate(0) translateY(0);
  }
}

.front {
  position: fixed;
  bottom: 0;
  left: 0;
}

@media only screen and (max-height: 600px) {
  #center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -25%);
  }
}