* {
    padding: 0;
    margin: 0;
}

html {
    height: 100%;   
}

body{
    height: 100%;
    background-size: auto, 100%;
    background-color:#000000f1;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.logo{
    height: 40px;
    display: flex; 
    justify-content: left; 
    align-items: left; 
}


/*Begrüßungsanimation*/
@keyframes fade-in{
    0%{opacity: 0;}
    100%{opacity: 1;}
}


.intro{
   /* position:relative;
    align-items: center;
    justify-content: center;
    text-align: center; */
    animation: fade-in 5s ;
    width: auto;
    height: auto;
    display: box;
    text-align: center;
    justify-content: center;
    position: relative;
    /*DIV immer zentrieren auf der Webseite*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -90%);
}

#intro1{

    font-size:4rem;  /* Größe 28pt   */
    color: #d44908;
    font-family: "Arial Black", Gadget, sans-serif;
    text-shadow: 0px 0px 0 rgb(204,13,13),
                 0px 1px 0 rgb(178,-13,0),
                 0px 2px 0 rgb(153,-38,0),
                 0px 3px 0 rgb(128,-63,0),
                 0px 4px 0 rgb(102,-89,0),
                 0px 5px 0 rgb(77,-114,0),
                 0px 6px  0 rgb(52,-139,0),
                 0px 7px 6px rgba(189,179,179,0.79),
                 0px 7px 1px rgba(189,179,179,0.5),
                 0px 0px 6px rgba(189,179,179,.2);
 }


#intro2{
    font-size:1.5rem;  /* Größe 28pt   */
    color: #e98a04;
    font-family: "Arial Black", Gadget, sans-serif;
    text-shadow: 0px 0px 0 rgb(99, 97, 94),
                 0px 1px 0 rgb(150,88,1),
                 0px 2px 0 rgb(125,63,0),
                 0px 3px 0 rgb(100,38,0),
                 0px 4px 0 rgb(74,12,0),
                 0px 5px 0 rgb(49,-13,0),
                 0px 6px  0 rgb(24,-38,0),
                 0px 7px 6px rgba(189,179,179,0.79),
                 0px 7px 1px rgba(189,179,179,0.5),
                 0px 0px 6px rgba(189,179,179,.2);
}


/*Animation auf der Startseite*/

@keyframes move-background {
    from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(1000px, 0px, 0px);
      }
  }
  @-webkit-keyframes move-background {
    from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(1000px, 0px, 0px);
      }
  }
  
  @-moz-keyframes move-background {    
      from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(1000px, 0px, 0px);
      }
  }
  
      @-webkit-keyframes move-background {
      from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(1000px, 0px, 0px);
      }
  }
  
  .background-container{
      position: fixed;
      height: 2000px;
      top: 80px;
      left:0;
      bottom: 0;
      right: 0;
      
      
  }
  
  .sterne{
   background: black url("../img/stars.png") repeat;
   position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
        z-index: 2;
  }
  
  .blinken{
    width:10000px;
    height: 100%;
    background: transparent url("../img/funkeln.png") repeat;
    background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    
    -moz-animation:move-background 70s linear infinite;
  -ms-animation:move-background 70s linear infinite;
  -o-animation:move-background 70s linear infinite;
  -webkit-animation:move-background 70s linear infinite;
  animation:move-background 70s linear infinite;
    
}
  
.wolken{
    width:10000px;
    height: 100%;
    background: transparent url("../img/wolken.png") repeat;
    background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 4;

   -moz-animation:move-background 150s linear infinite;
  -ms-animation:move-background 150s linear infinite;
  -o-animation:move-background 150s linear infinite;
  -webkit-animation:move-background 150s linear infinite;
  animation:move-background 150s linear infinite;
}
  .moon{
    height: 38vh;
    width:40vh;
    position: absolute;
    z-index: 3;
    right: 20px;
    top: 30px;
  }

.class_mail{
position: absolute;
left: 50%;
top: 500px;
transform: translate(-50%, -50%);
}