/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    cursor:  url("sat_cur.png") , auto ;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*==================== ENDE INITCSS ================================= */

.bodybg{
    overflow: hidden;
    width:100vw;
    height:100vh ;
    background-image: url("Galaxis_3.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    background-color: aquamarine;
    z-index: 0;
    

}

.darkplan {
    position: absolute;
    margin :auto;
    

}


.bgcontainer{
    width: 100vw;
    position: fixed;
    z-index: 1;

}





@keyframes prot {
    0% {transform: rotatez(0deg) ;}
    100% {transform: rotatez(360deg) ;}
    }

    @keyframes Rotate {
      0% {transform: rotatez(0deg) ;}
      100% {transform: rotatez(360deg) ;}
      }


@keyframes Slide {
	0% {
		transform: translateX(0%) rotate(0deg);
	}

	100% {
		transform: translateX(100%) rotate(360deg);
	}
}
.Blackhole{
  
    position: absolute;
    animation: Rotate 200s linear reverse infinite ;
   margin-top: -200px;
   margin-left: -400px;
   width: 800px;
   height: 800px;
background-color: transparent;
opacity: 0.8;

   z-index: 1;
}
.Distnebula{
  position :absolute;
  margin-top: 300px ;
  margin-left: 300px; 
  
  width: 300px;
  opacity: 0.2;
  transition: 5s ;

}
.Distnebula:hover {
 position: absolute;
 margin: -300px -300px; 
 opacity: 0.7;
transform: rotate(560deg);
 width: 2000px;
 height: 2000px;
  
  
}
.Andro{
  position: inherit;
  margin-top: 400px;
  margin-left: 800px;

}

.moon{
  position:absolute;
  display: block;
  width:100%;
  height: 100%;
  margin-top: 0px;
  margin-left: 0px;
  animation: prot 2s infinite linear; 
}

/* ================================================================================== */
@keyframes M-rotate {
  from { transform: rotatez(0deg) ; }
  to   { transform: rotatez(360deg) ; }
}
.moon_1{
  position:absolute;
  display: block;
  background-size: 100px;
  background-position: center;
  width:100%;
  height: 100%;
  margin-top: 0px;
  margin-left: 0px;
  animation: M-rotate 3s   reverse infinite linear; 
}

/*==================================================================================*/

.planet{
    /* 
    https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
      * Make the initial position to be the center of the circle you want this
      * object follow.
      */
        position: absolute;
        background-image: url("P1_r.png");
        background-size: cover;
        width:120px;
        height:120px;
        margin-top: 0px;
        margin-left: -100px;
        cursor: url("lander.png"),auto;
         
     /*
      * Sets up the animation duration, timing-function (or easing)
      * and iteration-count. Ensure you use the appropriate vendor-specific 
      * prefixes as well as the official syntax for now. Remember, tools like 
      * CSS Please are your friends!
      */
      -webkit-animation: Orbit 4s linear infinite; /* Chrome, Safari 5 */
      -moz-animation: Orbit 4s linear infinite; /* Firefox 5-15 */
        -o-animation: Orbit 4s linear infinite; /* Opera 12+ */
           animation: Orbit 40s linear infinite; /* Chrome, Firefox 16+, 
                                                     IE 10+, Safari 5 */
   
   
       z-index: 2;    
 
 }
 
 /*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
 @-webkit-keyframes Orbit {
   from { -webkit-transform: rotate(0deg) translateX(600px) rotate(0deg); }
   to   { -webkit-transform: rotate(360deg) translateX(600px) rotate(-360deg); }
 }
 
 @-moz-keyframes Orbit {
   from { -moz-transform: rotate(0deg) translateX(600px) rotate(0deg); }
   to   { -moz-transform: rotate(360deg) translateX(600px) rotate(-360deg); }
 }
 
 @-o-keyframes Orbit {
   from { -o-transform: rotate(0deg) translateX(600px) rotate(0deg); }
   to   { -o-transform: rotate(360deg) translateX(600px) rotate(-360deg); }
 }
 
 @keyframes Orbit {
   from { transform: rotate(90deg) translateX(400px) rotate(0deg); }
   to   { transform: rotate(450deg) translateX(400px) rotate(360deg); }
 }
     
     
 
 /*====================================================================================================== */
 
.planet_1{
  position: absolute;
  background-image: url("P2.png");
  background-size: cover;
  width: 300px;
  height: 300px;
  margin-top: 0px ;
  margin-left:-100px;
  cursor: url("yellow.png"),auto;


     -webkit-animation: Orbit_1 6s linear infinite; /* Chrome, Safari 5 */
     -moz-animation: Orbit_1 6s linear infinite; /* Firefox 5-15 */
       -o-animation: Orbit_1 6s linear infinite; /* Opera 12+ */
          animation: Orbit_1 50s linear infinite; /* Chrome, Firefox 16+, 
                                                    IE 10+, Safari 5 */
  
  
      z-index: 3;    

}
/*
* Set up the keyframes to actually describe the begining and end states of 
* the animation.  The browser will interpolate all the frames between these 
* points.  Again, remember your vendor-specific prefixes for now!
*/
@-webkit-keyframes Orbit_1 {
  from { -webkit-transform: rotate(0deg) translateX(800px) rotate(0deg); }
  to   { -webkit-transform: rotate(360deg) translateX(800px) rotate(-360deg); }
}

@-moz-keyframes Orbit_1 {
  from { -moz-transform: rotate(0deg) translateX(800px) rotate(0deg); }
  to   { -moz-transform: rotate(360deg) translateX(800px) rotate(-360deg); }
}

@-o-keyframes Orbit_1 {
  from { -o-transform: rotate(0deg) translateX(800px) rotate(0deg); }
  to   { -o-transform: rotate(360deg) translateX(800px) rotate(-360deg); }
}

@keyframes Orbit_1 {
  from { transform: rotate(20deg) translateX(600px) rotate(0deg); }
  to   { transform: rotate(380deg) translateX(600px) rotate(-360deg); }
}

.planet_2{
    /* 
    https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
      * Make the initial position to be the center of the circle you want this
      * object follow.
      */
      position: absolute;
      background-image: url("P10.png");
     background-size: cover;

      width: 300px;
      height: 300px;
      margin-top: 0px ;
      margin-left:-100px;
      cursor: url("white.png"),auto;
  /*
      * Sets up the animation duration, timing-function (or easing)
      * and iteration-count. Ensure you use the appropriate vendor-specific 
      * prefixes as well as the official syntax for now. Remember, tools like 
      * CSS Please are your friends!
      */
      -webkit-animation: orbit_2 7s linear infinite; /* Chrome, Safari 5 */
      -moz-animation: orbit_2 7s linear infinite; /* Firefox 5-15 */
        -o-animation: orbit_2 7s linear infinite; /* Opera 12+ */
           animation: orbit_2 60s linear infinite; /* Chrome, Firefox 16+, 
                                                     IE 10+, Safari 5 */
   
   
       z-index: 4;    
 
 }
 
 /*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
 @-webkit-keyframes orbit_2 {
   from { -webkit-transform: rotate(0deg) translateX(1000px) rotate(0deg); }
   to   { -webkit-transform: rotate(360deg) translateX(1000px) rotate(-360deg); }
 }
 
 @-moz-keyframes orbit_2 {
   from { -moz-transform: rotate(0deg) translateX(1000px) rotate(0deg); }
   to   { -moz-transform: rotate(360deg) translateX(1000px) rotate(-360deg); }
 }
 
 @-o-keyframes orbit_2 {
   from { -o-transform: rotate(0deg) translateX(1000px) rotate(0deg); }
   to   { -o-transform: rotate(360deg) translateX(1000px) rotate(-360deg); }
 }
 
 @keyframes orbit_2 {
   from { transform: rotate(0deg) translatex(800px) rotate(30deg); }
   to   { transform: rotate(360deg) translatex(800px) rotate(-330deg); }
 }
     
   
 
 /*====================================================================================================== */
 
 .planet_3{
    /* 
    https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
      * Make the initial position to be the center of the circle you want this
      * object follow.
      */
   position: absolute;
   background-image: url("P5.png");
   background-size: cover;
   width: 250px;
   height: 250px;
   margin-top: 0px ;
   margin-left:-100px;
   margin-top: 0px ;
   cursor: url("white.png"),auto;
   
  /*
      * Sets up the animation duration, timing-function (or easing)
      * and iteration-count. Ensure you use the appropriate vendor-specific 
      * prefixes as well as the official syntax for now. Remember, tools like 
      * CSS Please are your friends!
      */
      -webkit-animation: orbit_3 8s linear infinite; /* Chrome, Safari 5 */
      -moz-animation: orbit_3 8s linear infinite; /* Firefox 5-15 */
        -o-animation: orbit_3 8s linear infinite; /* Opera 12+ */
           animation: orbit_3 70s linear infinite; /* Chrome, Firefox 16+, 
                                                     IE 10+, Safari 5 */
   
   
       z-index: 5;    
 
 }
 
 /*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
 @-webkit-keyframes orbit_3  {
   from { -webkit-transform: rotate(0deg) translateX(1100px) rotate(0deg); }
   to   { -webkit-transform: rotate(360deg) translateX(1100px) rotate(-360deg); }
 }
 
 @-moz-keyframes orbit_3 {
   from { -moz-transform: rotate(0deg) translateX(1100px) rotate(0deg); }
   to   { -moz-transform: rotate(360deg) translateX(1100px) rotate(-360deg); }
 }
 
 @-o-keyframes orbit_3 {
   from { -o-transform: rotate(0deg) translateX(1100px) rotate(0deg); }
   to   { -o-transform: rotate(360deg) translateX(1100px) rotate(-360deg); }
 }
 
 @keyframes orbit_3 {
   from { transform: rotate(80deg) translateX(1000px) rotate(0deg); }
   to   { transform: rotate(480deg) translateX(1000px) rotate(-720deg); }
 }
     
     
 
 /*====================================================================================================== */
 .planet_4{
    /* 
    https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
      * Make the initial position to be the center of the circle you want this
      * object follow.
      */
   position: absolute;
   background-image: url("P6.png");
   background-size: cover;
   width: 300px;
   height: 300px;
   margin-top: 0px ;
   margin-left:-100px;
   cursor: url("yellow.png"),auto;
  /*
      * Sets up the animation duration, timing-function (or easing)
      * and iteration-count. Ensure you use the appropriate vendor-specific 
      * prefixes as well as the official syntax for now. Remember, tools like 
      * CSS Please are your friends!
      */
      -webkit-animation: orbit_4 9s linear infinite; /* Chrome, Safari 5 */
      -moz-animation: orbit_4  9s linear infinite; /* Firefox 5-15 */
        -o-animation: orbit_4 9s linear infinite; /* Opera 12+ */
           animation:  orbit_4  80s linear infinite ; /* Chrome, Firefox 16+, 
                                                     IE 10+, Safari 5 */
   
   
       z-index: 6;    
 
 }
 
 /*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
 @-webkit-keyframes  orbit_4  {
   from { -webkit-transform: rotate(0deg) translateX(1200px) rotate(0deg); }
   to   { -webkit-transform: rotate(360deg) translateX(1200px) rotate(-360deg); }
 }
 
 @-moz-keyframes  orbit_4  {
   from { -moz-transform: rotate(0deg) translateX(1200px) rotate(0deg); }
   to   { -moz-transform: rotate(360deg) translateX(1200px) rotate(-360deg); }
 }
 
 @-o-keyframes  orbit_4  {
   from { -o-transform: rotate(0deg) translateX(1200px) rotate(0deg); }
   to   { -o-transform: rotate(360deg) translateX(1200px) rotate(-360deg); }
 }
 
 @keyframes  orbit_4 {
   from { transform: rotate(250deg) translateX(1300px) rotate(0deg); }
   to   { transform: rotate(610deg) translateX(1300px) rotate(-1440deg); }
 }
     
     
 
 /*====================================================================================================== */
 .planet_x{
    /* 
    https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
      * Make the initial position to be the center of the circle you want this
      * object follow.
      */
   position: absolute;
   margin-top: -200px ;
   margin-left:0 -200px;
  /*
      * Sets up the animation duration, timing-function (or easing)
      * and iteration-count. Ensure you use the appropriate vendor-specific 
      * prefixes as well as the official syntax for now. Remember, tools like 
      * CSS Please are your friends!
      */
      -webkit-animation: orbiz_x 4s linear infinite; /* Chrome, Safari 5 */
      -moz-animation: orbiz_x 4s linear infinite; /* Firefox 5-15 */
        -o-animation: orbiz_x 4s linear infinite; /* Opera 12+ */
           animation: orbiz_x 4s linear infinite; /* Chrome, Firefox 16+, 
                                                     IE 10+, Safari 5 */
   
   
       z-index: 8;    
 
 }
 
 /*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
 @-webkit-keyframes orbiz_x {
   from { -webkit-transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { -webkit-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
 
 @-moz-keyframes orbiz_x {
   from { -moz-transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { -moz-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
 
 @-o-keyframes orbiz_x {
   from { -o-transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { -o-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
 
 @keyframes orbiz_x {
   from { transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
     
     
 
 /*====================================================================================================== */
 .planet_x{
    /* 
    https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
      * Make the initial position to be the center of the circle you want this
      * object follow.
      */
   position: absolute;
   margin-top: -200px ;
   margin-left:0 -200px;
  /*
      * Sets up the animation duration, timing-function (or easing)
      * and iteration-count. Ensure you use the appropriate vendor-specific 
      * prefixes as well as the official syntax for now. Remember, tools like 
      * CSS Please are your friends!
      */
      -webkit-animation: orbiz_x 4s linear infinite; /* Chrome, Safari 5 */
      -moz-animation: orbiz_x 4s linear infinite; /* Firefox 5-15 */
        -o-animation: orbiz_x 4s linear infinite; /* Opera 12+ */
           animation: orbiz_x 4s linear infinite; /* Chrome, Firefox 16+, 
                                                     IE 10+, Safari 5 */
   
   
       z-index: 8;    
 
 }
 
 /*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
 @-webkit-keyframes orbiz_x {
   from { -webkit-transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { -webkit-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
 
 @-moz-keyframes orbiz_x {
   from { -moz-transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { -moz-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
 
 @-o-keyframes orbiz_x {
   from { -o-transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { -o-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
 
 @keyframes orbiz_x {
   from { transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
     
     
 
 /*====================================================================================================== */
 .planet_x{
    /* 
    https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
      * Make the initial position to be the center of the circle you want this
      * object follow.
      */
   position: absolute;
   margin-top: -200px ;
   margin-left:0 -200px;
  /*
      * Sets up the animation duration, timing-function (or easing)
      * and iteration-count. Ensure you use the appropriate vendor-specific 
      * prefixes as well as the official syntax for now. Remember, tools like 
      * CSS Please are your friends!
      */
      -webkit-animation: orbiz_x 4s linear infinite; /* Chrome, Safari 5 */
      -moz-animation: orbiz_x 4s linear infinite; /* Firefox 5-15 */
        -o-animation: orbiz_x 4s linear infinite; /* Opera 12+ */
           animation: orbiz_x 4s linear infinite; /* Chrome, Firefox 16+, 
                                                     IE 10+, Safari 5 */
   
   
       z-index: 8;    
 
 }
 
 /*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
 @-webkit-keyframes orbiz_x {
   from { -webkit-transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { -webkit-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
 
 @-moz-keyframes orbiz_x {
   from { -moz-transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { -moz-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
 
 @-o-keyframes orbiz_x {
   from { -o-transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { -o-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
 
 @keyframes orbiz_x {
   from { transform: rotate(0deg) translateX(400px) rotate(0deg); }
   to   { transform: rotate(360deg) translateX(400px) rotate(-360deg); }
 }
     
     
 
 /*====================================================================================================== */
 


 .ufo {
  overflow: hidden;
  
  margin-left: 0px;
 
   animation: ufomove 20s ease-out alternate infinite; 
 
 }
 
 @keyframes ufomove {
 0%{
   transform: translateX(0px) ;
   opacity: 0;
   
 }
 40%{
   transform: translateX(600px) translateY(600px)  rotate(360deg) scale(4);
   opacity: 1;
   
 }
 
 70%{
   transform: translateX(1000px) translateY(1200px)  rotatey(720deg) scale(4);
   opacity: 1;
 }
 100%{
   transform: translateX(1800px) translateY(250px) rotate(480deg) scale(0.5); /* max width - img_size */
   opacity: 0.1;
 }
 
 }

 .Nurflgel {
  overflow: hidden;
  
  margin-left: 0px;
 
   animation: nfomove 40s ease-in-out alternate infinite; 
 
 }
 
 @keyframes nfomove {
 0%{
   transform: translateX(0px) ;
   opacity: 0;
   
 }
 30%{
   transform: translateX(1800px) translateY(600px)  rotate(360deg) scale(2);
   opacity: 1;
   
 }
 
 70%{
   transform: translateX(100px) translateY(1500px)  rotatey(720deg) scale(3);
   opacity: 1;
 }
 100%{
   transform: translateX(2000px) translateY(0px) rotate(480deg) scale(0.5); /* max width - img_size */
   opacity: 0.1;
 }
 
 }