body{
  font-family: sans-serif;
  line-height: 1.6;
  padding: 40px;
  overflow-x:hidden /*avoid horizontal scrollbars during animation */
}

/*Container for flight movement */
.flying-container{
  position:fixed; /* locks image into a specific position relative to the browser viewport
  Because it is removed from the normal flow, it hovers over the page.*/
  top:20%; /* Vertical postion on screen*/
  left:-150px; /*start off screen to left */
  z-index:9999; /* guarantee that an element stays on top of everything else on the entire page*/
  pointer-events:none; /* Allows users to click on text hidden behind image*/
  animation:flyAcross 4s linear 1 forwards; /* Loop the flight path forever with "linear infinite;" or can do "linear 3 forwards";--repeats 3 times then stops*/
}
/* Style the image */
.flying-container img{
  width:500px;
  height:auto;
}
/*Animation details */
@keyframes flyAcross{
  0% {
    transform:translateX(0vw) rotate(0deg); /*starting frame*/
  }
  100% {
    transform:translate(120vw) rotate(15deg); /* End frame *//*Moves past the right edge */ /*100vw is the exact edge of the screen, 
    pushing it to 120vw guarantees the element flies completely off the screen and out of sight.*/
  }
}