* {
  box-sizing: border-box;
  position: relative;
}

body {
  font-size: 14pt;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", "Calibri", "Lucida Grande", "Helvetica", "Arial", sans-serif;
  overflow: hidden;
}

.page-container,
.canvas-container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#skyDragon {
  position: absolute;
  top: 100px;
  left: 20%;
  width: 145px;
  height: 129px;
  background-image: url(../img/sky_dragon_crop.png);
  z-index: 100;
  -webkit-animation: fly 2.5s ease-in-out infinite;
          animation: fly 2.5s ease-in-out infinite;
}

canvas {
  margin: 0 auto;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

#foreground4 {
  -webkit-animation: scroll 15s linear infinite;
          animation: scroll 15s linear infinite;
}

#foreground3 {
  -webkit-animation: scroll 7s linear infinite;
          animation: scroll 7s linear infinite;
}

#foreground2 {
  -webkit-animation: scroll 4s linear infinite;
          animation: scroll 4s linear infinite;
}

#foreground1 {
  -webkit-animation: scroll 1s linear infinite;
          animation: scroll 1s linear infinite;
}

@-webkit-keyframes scroll {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes scroll {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}
@-webkit-keyframes fly {
  0% {
    top: 100px;
  }
  50% {
    top: 200px;
  }
  100% {
    top: 100px;
  }
}
@keyframes fly {
  0% {
    top: 100px;
  }
  50% {
    top: 200px;
  }
  100% {
    top: 100px;
  }
}