body {
  background-image: url(../billeder/skeletontree.jpg);  
  height: 500px;
  width: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

img {
    height: 255px;
    width: auto;
}


#ghost {
    position: relative;
    width: 150px;
    height: auto;

    animation-name: flying; /* vælg et andet navn til animationerne end example ;-) */
    animation-duration: 14s; /* se de mange animations-muligheder: start, stop, loop, etc. */
    animation-iteration-count: infinite;
}

/* The animation code */
@keyframes flying {
    0%   {
        left: 800px;
        top: -15px;
        -webkit-transform: scaleX(-1);
        transform: scaleX(1);
    } 
    25%  {
        left:1100px;
        top: 50px;
        -webkit-transform: scaleX(-1);
        transform: scaleX(1);
    }
    50%  {
        left: 1300px;
        top: 10px;
        -webkit-transform: scaleX(-1);
        transform: scaleX(1);
    }
    75% {
        left: 1100px;
        top: -50px;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    100% {
        left: 800px;
        top: -15px;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
  }

 /* græskar animation*/
  #mghosts img {
    position: relative;
    width: 222px;
    height: auto;

    animation-name: spinning; /* vælg et andet navn til animationerne end example ;-) */
    animation-duration: 14s; /* se de mange animations-muligheder: start, stop, loop, etc. */
    animation-iteration-count: infinite;
}

  /* keyframes via procenter */

  @keyframes spinning {
    0%   {
        top: 100px;
        left: 160px;
        rotate: 360deg;
    } 
    25%  {
        top: 200px;
        left: 260px;
    }
    50%  {
        top: 400px;
        left: 160px;
    }
    75% {
        top: 200px;
        left: 60px;
    }
    100% {
        top: 100px;
        left: 160px;
    }
  }

  #pum {
    width: 3%;
    height: auto;
    position: relative;
    top: 670px;
    left: 235px;
    opacity: 30%;
  }


#pil {
    rotate: 180deg;
    width: 4%;
    height: auto;
    position: relative;
    top: -130px;
    left: 60px;

}