* {
    margin: 0;
    padding:0;

    cursor: url('mauszeiger.png'), auto;
    }

   


#Kopf {
  background-color: white;

  display: grid;
  grid-template-columns: 135px 150px 150px auto;
  
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #ffc2c2 ; font-size: large ; font-weight: 550;
  text-shadow:  1px  1px 1px rgba(39, 39, 39, 0.397),
                  1px -1px 1px rgba(39, 39, 39, 0.397),
                 -1px  1px 1px rgba(39, 39, 39, 0.397),
                 -1px -1px 1px rgba(39, 39, 39, 0.397);
                 

}



#Logo{
background-color: white;
height: 55px;
padding: 10px 10px;


}


#Story{
    padding-left: 40px;
    padding-top: 3px;
    background-color: white;


    
}


#Freunde{
    padding-left: 40px;
    padding-top: 3px; 
    background-color: white;
}






#Middle{

    display: grid;
    grid-template-columns: auto auto auto auto auto auto;

    background-color: #ffc2c2;
    height: 505px;
    
    
}

.content_background{
    background-image: linear-gradient(to top, #ffe9e9 0%, #ffc2c2 80%);
    padding-top: 15px;
    
}

.content{

    width: 20%; 
    align-content: center;
    justify-content: center;
    margin: 0 auto;
    background-color: white;
}


.sliderElements,
.sliderElements figure,
.sliderControls {
    margin: 0;
}
 
.sliderElements:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}
 
.cssSlider {
    overflow-x: hidden;
}
 
.sliderElements {
    list-style: none;
    position: relative;
    left: 0;
    width: 500%;
    margin-bottom: .8em;
    padding: 0;
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;
}
 
.sliderElements > li {
    float: left;
    width: 20%;
    position: relative;
}
 
#slide02:checked ~ .sliderElements {
    left: -100%;
}
 
#slide03:checked ~ .sliderElements {
    left: -200%;
}
 
#slide04:checked ~ .sliderElements {
    left: -300%;
}

#slide05:checked ~ .sliderElements {
    left: -400%;
}



 
/* Bildunterschrift auf dem Bild positionieren */
.sliderElements figcaption {
    display: block;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 1em;
    padding: .4em;
    background: rgba(0,0,0,.5);
}
 
/* Bilder responsive */
.sliderElements img {
    width: 100%;
    height: 505px;
   
}
 
 
/* inputs aus dem Blickfeld schieben */
.cssSlider input {
    position: absolute;
    left: -99999px;
}
 
/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
    text-align: center;
}
 
/* Controls nebeneinander bringen */
.sliderControls li {
    display: inline-block;
}
 
/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.sliderControls label {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: #ffc2c2;
    color: #ffc2c2;
}
 
/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"],
#slide03:checked ~ .sliderControls label[for="slide03"],
#slide04:checked ~ .sliderControls label[for="slide04"],
#slide05:checked ~ .sliderControls label[for="slide05"] {
    background: #ddd;
    color: #ddd;
}




#Video{
        background-color: #ffe9e9;
       height: 297px;

       display: grid;
        grid-template-columns: auto auto auto;
        padding-top: 15px;

     }

#Video1{

    background-color: #ffe9e9;
    margin: 0 auto;
    margin-left: 30%;
        
   
 

}

#Video2{

    background-color: #ffe9e9;
    margin: 0 auto;

 
}

#Video3{
    background-color: #ffe9e9;
    margin: 0 auto;
    margin-right: 30%;
   
}

#Fuß{
    background: url(Footer3.png) repeat-x;
    width: 100%; max-width:100%; height: 55px;
    animation: flykittys 60s linear infinite;
    
    position: fixed;
    left: 0;
    bottom: 0;

 }
 
 @keyframes flykittys {
     from { background-position: 0px 0px }
     to { background-position: 3600px 0px }
}






  /* Dropdown-Container */
  .dropdown {
    float: left;
    overflow: hidden;
  }

  /* Dropdown-Button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    padding: 10px 40px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    text-align: center;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ffc2c2 ; font-size: large ; font-weight: 550;
    text-shadow:  1px  1px 1px rgba(39, 39, 39, 0.397),
                  1px -1px 1px rgba(39, 39, 39, 0.397),
                 -1px  1px 1px rgba(39, 39, 39, 0.397),
                 -1px -1px 1px rgba(39, 39, 39, 0.397);


  }

  /* Dropdown-Inhalt (versteckt standardmäßig) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  /* Links im Dropdown */
  .dropdown-content a {
    float: none;
    padding: 10px 10px;
    margin-top: 6px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ffc2c2 ; font-size: large ; font-weight: 550;
    text-shadow:  1px  1px 1px rgba(39, 39, 39, 0.397),
                    1px -1px 1px rgba(39, 39, 39, 0.397),
                   -1px  1px 1px rgba(39, 39, 39, 0.397),
                   -1px -1px 1px rgba(39, 39, 39, 0.397);
  }

  /* Hover-Farbe für Dropdown-Links */
  .dropdown-content a:hover {
    background-color: #ddd;
  }

  /* Anzeigen des Dropdowns bei Hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }



  .Mitte{
    height: 87%;
    width: 100%;
    position: fixed;
    background-image: linear-gradient(to top, #ffe9e9 0%, #ffc2c2 80%);
    
  }




  .hauptstory{

    display: flex;
    align-items: center;
    background-color: white;
    position: fixed;
    height: 65%;
    width: 60%;
    
    
    


    
    
       





  }