svg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}

.scene {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  border-bottom: 80px solid #086292;
  height: 100%;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  background: #05abe0;
  background: linear-gradient(to bottom, #05abe0 0%, #87e0fd 100%);
  z-index: 0;
}

.scene > div {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.scene > div.seawall {
  width: 200%;
  height: 50px;
  background: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.25) 50%) #0e374e;
  background-size: 50px 50px;
  border-top: 10px solid #8a8a8a;
  z-index: 999;
  bottom: -40px;
  left: -50%;
	z-index: 6;
}

.scene > div.ground {
  width: 200%;
  height: 140px;
  bottom: 0;
  left: -50%;
  background: #587709;
  background: linear-gradient(to bottom, #587709 0%, #82b010 100%);
  z-index: -1;
}

.scene > div.clouds {
  height: 410px;
  opacity: 0.75;
  bottom: 100px;
  z-index: 2;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
  -webkit-animation: clouds 90s infinite linear;
          animation: clouds 90s infinite linear;
}

.scene > div.clouds.two {
  height: 310px;
  opacity: 0.25;
  bottom: 50px;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
  -webkit-animation: clouds 160s infinite linear;
          animation: clouds 160s infinite linear;
}
@-webkit-keyframes clouds {
	from { left: 50%; }
	to { left: -100%; }
}
@keyframes clouds {
	from { left: 50%; }
	to { left: -100%; }
}
.sun {
	background-color: yellow;
	height: 60px;
	width: 60px;
	position: absolute;
	top: 0;
	right: 55%;
	left: 45%;
	bottom: auto;
	z-index: -99;
	border-radius: 100%;
	box-shadow: 0 0 45px 5px white,
							0 0 25px 10px yellow,
							inset 0 0 15px 5px yellow;
}
.scene > div.trees {
  height: 200px;
  z-index: 5;
  bottom: 20px;
}

.scene > div.grass {
  width: 100%;
  height: 55px;
  z-index: 0;
  bottom: 100px;
}

.scene > div.grass.two {
  width: 100%;
  height: 50px;
  z-index: 4;
  bottom: 10px;
}

.scene > div.buildings {
  width: 100%;
  height: 310px;
  bottom: 50px;
	z-index: 3;
}

/* Sailboat */
.sailboat {
  height: 180px;
  z-index: 0;
  position: absolute;
  top: auto;
  left: -50%;
  right: 100%;
  bottom: 50px;
  -webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1500;
  -webkit-animation: sail 50s infinite linear;
          animation: sail 50s infinite linear;
  top: auto;
}
.sailboat svg {
  -webkit-animation: float 5s infinite cubic-bezier(0.7, 0.7, 0.1, 0.4);
          animation: float 5s infinite cubic-bezier(0.7, 0.7, 0.1, 0.4);
}

@-webkit-keyframes sail {
  0% {
    left: -50%;
    right: 100%;
    bottom: 50px;
  }
  90%,
  100% {
    left: 100%;
    right: -50%;
    bottom: 50px;
  }
}

@keyframes sail {
  0% {
    left: -50%;
    right: 100%;
    bottom: 50px;
  }
  90%,
  100% {
    left: 100%;
    right: -50%;
    bottom: 50px;
  }
}

/* Bird */
.bird-wrapper {
  position: absolute;
  width: 100%;
  -webkit-animation: fly 15s infinite linear;
          animation: fly 15s infinite linear;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
}

.bird div {
  position: absolute;
}

.bird {
  position: absolute;
  -webkit-backface-visibility: hidden;
  -webkit-animation: float 0.7s infinite cubic-bezier(0.7, 0.7, 0.1, 0.4);
          animation: float 0.7s infinite cubic-bezier(0.7, 0.7, 0.1, 0.4);
}

.bird-body-one,
.bird-body-two,
.bird-wing-left,
.bird-wing-right {
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-radius: 5px;
}

.bird-body-one {
  border-width: 15px;
  border-left-width: 25px;
  border-top-width: 20px;
  border-right-width: 60px;
  border-top-color: #ade6fe;
  border-radius: 15px;
}

.bird-body-two {
  left: 50px;
  bottom: 0;
  border-width: 5px;
  border-left-width: 5px;
  border-top-width: 2px;
  border-right-width: 10px;
  border-bottom-color: #dff4fd;
  border-radius: 15px;
}

.bird-wing-left {
  left: 20px;
  bottom: -5px;
  border-width: 10px;
  border-left-width: 20px;
  border-bottom-width: 0;
  border-right-width: 10px;
  border-bottom-color: #dff4fd;
  -webkit-animation: flap-left 0.7s ease-in-out infinite;
          animation: flap-left 0.7s ease-in-out infinite;
}

.bird-wing-right {
  left: 22px;
  top: 4px;
  border-width: 10px;
  border-left-width: 20px;
  border-bottom-width: 0;
  border-right-width: 10px;
  border-top-color: #dff4fd;
  -webkit-animation: flap-right 0.7s ease-in-out infinite;
          animation: flap-right 0.7s ease-in-out infinite;
}

@-webkit-keyframes flap-right {
  0%,
  10% {
    border-top-width: 20px;
  }
  40%,
  60% {
    border-top-width: 10px;
  }
  100% {
    border-top-width: 40px;
  }
}

@keyframes flap-right {
  0%,
  10% {
    border-top-width: 20px;
  }
  40%,
  60% {
    border-top-width: 10px;
  }
  100% {
    border-top-width: 40px;
  }
}

@-webkit-keyframes flap-left {
  0% {
    border-bottom-width: 0;
  }
  40%,
  60% {
    border-bottom-width: 40px;
  }
  100% {
    border-bottom-width: 0;
  }
}

@keyframes flap-left {
  0% {
    border-bottom-width: 0;
  }
  40%,
  60% {
    border-bottom-width: 40px;
  }
  100% {
    border-bottom-width: 0;
  }
}

@-webkit-keyframes fly {
  0%,
  10% {
    left: -50%;
    top: 150px;
    transform: scale3d(0.75, 0.75, 1);
  }
  90%,
  100% {
    left: 100%;
    top: 160px;
    transform: scale3d(0.25, 0.25, 1);
  }
}

@keyframes fly {
  0%,
  10% {
    left: -50%;
    top: 150px;
    transform: scale3d(0.75, 0.75, 1);
  }
  90%,
  100% {
    left: 100%;
    top: 160px;
    transform: scale3d(0.25, 0.25, 1);
  }
}

@-webkit-keyframes float {
  0% {
    top: 25px;
  }
  50% {
    top: 0;
  }
  100% {
    top: 25px;
  }
}

@keyframes float {
  0% {
    top: 25px;
  }
  50% {
    top: 0;
  }
  100% {
    top: 25px;
  }
}

/* Waves */
.waves {
  width: 100%;
  height: 10vh;
  min-height: 5em;
  position: fixed;
  overflow: hidden;
  bottom: 0;
  left: 0;
	z-index: 0;
}

.wave {
  width: calc(100% + 5em);
  height: 100%;
  position: absolute;
  left: -2em;
  background: bottom center repeat-x;
  background-size: 25% auto;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

/* Individual wave layers */
.wave-one {
  -webkit-animation-name: wave-one;
          animation-name: wave-one;
  -webkit-animation-duration: 5.4s;
          animation-duration: 5.4s;
  -webkit-animation-delay: -3.2s;
          animation-delay: -3.2s;
  top: -0.5em;
  z-index: 1;
  opacity: 0.10;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="246" height="2000" viewBox="0 0 246 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#167bb1" d="M0 2000c50.43 0 72.57-20.522 123-20.522 50.43 0 71.34 20.522 123 20.522V0H0v2000z"/></svg>');
  background-position: bottom left;
}

.wave-two {
  -webkit-animation-name: wave-two;
          animation-name: wave-two;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  top: -1.0em;
  z-index: 2;
  opacity: 0.25;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="307" height="2000" viewBox="0 0 307 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#167bb1" d="M0 0h307v2000c-64.47 0-90.563-25.623-153.5-25.623C90.565 1974.377 62.935 2000 0 2000V0z"/></svg>');
  background-position: bottom right;
}

.wave-three {
  -webkit-animation-name: wave-three;
          animation-name: wave-three;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  -webkit-animation-delay: -3.4s;
          animation-delay: -3.4s;
  top: -2.0em;
  z-index: 3;
  opacity: 0.50;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="384" height="2000" viewBox="0 0 384 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#167bb1" d="M0 0h384v2000c-80.64 0-113.28-32.047-192-32.047S78.72 2000 0 2000V0z"/></svg>');
  background-position: bottom center;
}

.wave-four {
  -webkit-animation-name: wave-four;
          animation-name: wave-four;
  -webkit-animation-duration: 4.6s;
          animation-duration: 4.6s;
  -webkit-animation-delay: -2.8s;
          animation-delay: -2.8s;
  top: -3.0em;
  z-index: 4;
  opacity: 0.75;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="480" height="2000" viewBox="0 0 480 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#167bb1" d="M480 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h480v2000z"/></svg>');
  background-position: bottom left;
}

.wave-five {
  -webkit-animation-name: wave-five;
          animation-name: wave-five;
  -webkit-animation-duration: 5.0s;
          animation-duration: 5.0s;
  -webkit-animation-delay: -4.0s;
          animation-delay: -4.0s;
  top: -4.0em;
  z-index: 5;
  opacity: 0.90;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#167bb1" d="M0 2000c123 0 177-49.866 300-49.866S474 2000 600 2000V0H0v2000z"/></svg>');
  background-position: bottom right;
}

/* Wave animations */
@-webkit-keyframes wave-one {
  from {
    transform: rotate(0deg) translatey(-0.61em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-0.61em) rotate(-360deg);
  }
}
@keyframes wave-one {
  from {
    transform: rotate(0deg) translatey(-0.61em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-0.61em) rotate(-360deg);
  }
}

@-webkit-keyframes wave-two {
  from {
    transform: rotate(0deg) translatey(-0.77em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-0.77em) rotate(-360deg);
  }
}

@keyframes wave-two {
  from {
    transform: rotate(0deg) translatey(-0.77em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-0.77em) rotate(-360deg);
  }
}

@-webkit-keyframes wave-three {
  from {
    transform: rotate(0deg) translatey(-0.96em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-0.96em) rotate(-360deg);
  }
}

@keyframes wave-three {
  from {
    transform: rotate(0deg) translatey(-0.96em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-0.96em) rotate(-360deg);
  }
}

@-webkit-keyframes wave-four {
  from {
    transform: rotate(0deg) translatey(-1.2em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-1.2em) rotate(-360deg);
  }
}

@keyframes wave-four {
  from {
    transform: rotate(0deg) translatey(-1.2em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-1.2em) rotate(-360deg);
  }
}

@-webkit-keyframes wave-five {
  from {
    transform: rotate(0deg) translatey(-1.5em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-1.5em) rotate(-360deg);
  }
}

@keyframes wave-five {
  from {
    transform: rotate(0deg) translatey(-1.5em) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translatey(-1.5em) rotate(-360deg);
  }
}