body {
  text-align: center;
  background: black;
}

svg {
	max-width: 80vh;
}


#stars1{
animation: fade 3.5s infinite ease-in;
  animation-delay: 2s;
}

#stars2{
animation: fade 3s infinite ease-in;
  animation-delay: 2s;
}

#pumpkin1{
animation: fade 3.5s infinite;
  animation-delay: 0.5s;
}

#pumpkin2{
animation: fade 4s infinite;
  animation-delay: 0.5s;
}

#pumpkin3{
animation: fade 2s infinite;
  animation-delay: 0.5s;
}

#windows1{
animation: fade 4s infinite;
  animation-delay: 1.0s;
}

#windows2{
animation: fade 5s infinite;
  animation-delay: 1.0s;
}

#window3{
animation: fade 3s infinite;
  animation-delay: 1.0s;
}

#window4{
animation: fade 5s infinite;
  animation-delay: 1.0s;
}

#eyes1{
animation: fade 6s infinite;
  animation-delay: 4s;
}
#eyes2{
animation: fade 6s infinite;
  animation-delay: 4s;
}

#lefteye{
animation: fade 1s infinite;
  animation-delay: 1s;
}

#righteye{
animation: fade 1s infinite;
  animation-delay: 2s;
}




@keyframes fade {
  100%{ opacity: 0;} 
}



#witch{
animation: fly 7s infinite;
  animation-delay: 4s;
}


#bat1{
animation: fly 5s infinite;
  animation-delay: 2s;
}

#bat2{
animation: fly 4s infinite;
  animation-delay: 1.5s;
  animation-direction : alternate;
}

#bat3{animation: fly 7s infinite;
  animation-delay: 1.5s;
 }


@keyframes fly {
   from {transform : scale(0);}
  
    50% {
        transform : scale(0.75);
        opacity   : 1;}
  
    to {
        transform : scale(5);
      transform: 10px;}
}


#web1{
  animation: web 5s infinite;
  animation-delay: 1.5s;
   { transform : translateX(0em) }
    { transform : translateY(40em) scale(0.1); }
}


/* web */

#web2{
  animation: web 4s infinite;
  animation-delay: 1.5s;
}

#web3{
  animation: web 3.5s infinite;
  animation-delay: 1.5s;
}


@keyframes web {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


/* halloween text */

#h{
animation: swipe 6s infinite;
  
}

#a{
animation: swipe 6s infinite;
  animation-delay: .5s;
}

#lo{
animation: swipe 6s infinite;
 animation-delay: 1.0s;
}

#low2{
animation: swipe 6s infinite;
 animation-delay: 1.5s;
}

#o{
animation: swipe 6s infinite;
  animation-delay: 2.0s;
}

#w{
animation: swipe 6s infinite;
  animation-delay: 2.5s;
}

#year1{
animation: swipe 6s infinite;
  animation-delay: 3.0s;
}

#year2{
animation: swipe 6s infinite;
  animation-delay: 3.5s;
}

#n{
animation: swipe 6s infinite;
  animation-delay: 4.0s;
}

@keyframes swipe {
  50%{ opacity: 0;}
  
}





/* moon */
/##moon{
  animation: spin 10s infinite ease alternate;
  animation-delay: 3s;
    transform-origin: center center;
}


@keyframes spin {
	100% {transform: rotate(360deg) scale(0.1);
  } 

   
/*   mediaquery */
/*   @media(max-width: 960px) {
    
    svg {
      max-width: 50vw;
    }
  }
   */