/* Selektor für Klassen (mehrere Tags): Punkt (.) */
*{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body{
    background-color: rgb(0, 0, 0);
    background-image: url(background.jpg);

}

ul.menu{
    position: relative;
    bottom: 50px;
    border-radius: 25px;
    height: 50px;
    list-style-type: none;
    overflow: hidden;
    background-color: #7c1377;
    opacity: 0.75;
    width: 75%;
  }
  
  li {
    width: 25%;
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: #5a0e56;
    text-decoration: underline;
  }


  ul.problems{
    position: relative;
    border-radius: 10px;
    height: 100px;
    list-style-type: circle;
    width: 90%;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    }
  
   ul.problems > li {
        height: 33%;
        color: white;
        width: 100%;
        float: left;
    }
    ul.problems > li a{
      opacity: 1;
      display: block;
      color: white;
      text-align: center;
      padding: 16px;
      text-decoration: none;
    }

#middleBottom {
    z-index: 2;
    position: relative ;
    bottom: 300px;
    position: sticky;
    top: 0px;


}
#topHeader{
    position: relative;
    bottom: 50px;
    background-image: url(background___.jpg);
    background-position: center;
    height: 500px; 
    width: 100%;
}
#topHeadImg{
    z-index: -1;
    background-color: black;
    height: 200px;

}
#titletext{
    width: auto;
    height: 100px;
    background-color: #421343;
    opacity: 0.7;
    position: relative;
    top: 50px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
}
#titlepar{
    position: relative;
    top: 15%;
    margin: auto;
    text-align: center;
    color: white;

}
#logo{
  background-image: url(favicon.png);
  height: 300px;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.textbox1{
  background-color: rgba(150, 0, 150, 0.4);
  height: auto;
  width: 35%;
  position: relative; 
  top: -380px;
  left: 10%;
  border-radius: 10px;
  padding-bottom: 10px;
}
.title1 {
  text-align: center;
  text-decoration: underline;
  color: white;
  font-size: xx-large;
}
.text1 {
  margin: 16px;
  color: white;
  font-size: small;
}

.picture1{
  height: 400px;
  width: 35%;
  position: relative;
  top: 20px; 
  left: 55%;
  background-image: url(gnome.jpg);
  background-size: 500px;
  background-position: 0;
  border-radius: 10px;

}  

#statistic {
  background-image: url(diagramm.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-blend-mode: normal;
}

.textbox2 {
  background-color: rgba(150, 0, 150, 0.4);
  height: auto;
  width: 35%;
  position: relative; 
  left: 55%;
  top: -400px;
  border-radius: 10px;
}

.text2 {
  margin: 16px;
  color: white;
  font-size: small;
}
.picture2 {
  height: 400px;
  width: 35%;
  position: relative;
  left: 10%;
  background-image: url(gnome.jpg);
  background-size: 500px;
  background-position: 0;
  border-radius: 10px;
}
#pic2 {
  background-image: url(naturepic.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: normal;
}
#pic3{
  background-image: url(lösung.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: center;
  background-blend-mode: normal;
}
#bottom {
  background-color: black;
  height: 200px;
  width: 100%;%;
}
#bottomtext{
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
}