body{
  background-color: rgb(234, 237, 239);
  margin: 0px;
}
/*The whole menu-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
nav{
  background-color:rgb(234, 237, 239) ;
  display: flex;
  justify-content: space-between;
  margin:0px;
  padding:10px;
  z-index: 1000;
  position: relative;
}
.titlediv{
  align-items: center;
}
h1{
  margin:0px;
    font-size: 40px;
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: normal;
    flex-shrink: 5;
    color: rgb(3,145,2);
}
.untertitle{
  font-family: "DM Serif Text", serif;
}

.menubutton{
  font-family: "DM Serif Text", serif;
  font-size: 30px;
  border:none;
  background-color: rgb(234, 237, 239) ;
  margin-top: 5px;
  padding:10px;
  transition: transform 0.15s ease;
  
}
.menubutton:hover{
  cursor: pointer;
  transform: scale(1.08);
}
.englishbutton{
  font-family: "DM Serif Text", serif;
  font-size: 30px;
  border:none;
  background-color: rgb(234, 237, 239) ;
  margin-top: 5px;
  padding:10px;
  color:rgb(3,145,2);
  transition: transform 0.15s ease;
  
}
.englishbutton:hover{
  cursor: pointer;
  text-decoration: underline;
  transform: scale(1.08);
}
.homebutton{
  text-decoration: underline;
  font-family: "DM Serif Text", serif;
  font-size: 30px;
  border:none;
  background-color: rgb(234, 237, 239) ;
  margin-top: 5px;
  transition: transform 0.15s ease;
}
.homebutton:hover{
  cursor: pointer;
  transform: scale(1.08);
}
.untertitle{
  font-size: 20px;
  margin-top:5px;
  margin-bottom: 0px;
}
.burgermenuicon{
  width: 70px;
}
burgermenu{
  display: none;
}
.menuicon{
  width: 35px;
  margin-top: 15px;
  margin-right: 10px;
  transition: transform 0.15s ease;
}
.menuicon:hover{
  transform: scale(1.08);
}
.menubuttons{
  display: flex;
  align-items: center;
}
.menuiconburger{
  height: 35px;
  transition: transform 0.15s ease;
  margin-top: 19px;
}

/* The image main image style---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mainimage{
  width: 100%;
  
  top: 97.67px;
  
}
/*The whole content of the website------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
content{
  display: flex;
  justify-content: center;
  flex-direction: column;
  
}
.homepagetext{
  font-family: "DM Serif Text", serif;
  font-size: 30px;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.homepagetextdiv{
  display: flex;
  justify-content: center;
  align-items: stretch;
}
/*Mitglieder---------------------------------------------------------------------------------------------------------------------*/
.mitgliederhomepage{
  background-color: rgb(213, 215, 217);
  border-radius: 5px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.mitglied{
  background-color: rgb(234, 237, 239);
  display: flex;
  align-items: center;
  border-radius: 15px;
  margin: 20px;
}
.mitgliedbild{
  width: 200px;
  border-radius: 200px;
  margin: 15px;
}
.mitgliedercontent{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
h3{
  color:rgb(3,145,2) ;
  font-size: 40px;
  padding-left: 20px;
  font-family: "DM Serif Text", serif;
  
}
.mitgliederbutton{
  font-family: "DM Serif Text", serif;
  font-size: 25px;
  border:none;
  background-color: rgb(213, 215, 217);
  margin-top: 5px;
  border:10px;
  transition: border 0.15s;
}



.name{
  border: none;
  font-family: "DM Serif Text", serif;
  font-size: 25px;
  margin-right: 15px;
  margin-bottom: 0px;
  color: black;
  text-align: center;
  
}
.name:hover{
 
  background-color: inherit;
}
.allemitglieder{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mehr{
  margin: none;
  text-decoration: underline;
  font-size: 20px;
  border:none;
  font-family: "DM Serif Text", serif;
  -webkit-text-decoration-color: rgb(3,145,2); 
  text-decoration-color: rgb(3,145,2);
  color: black;

}


.mehrdiv{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  transition: background-color 0.15s;
}

.arrow{
  width: 40px;
  height: 40px;
}
.websitebutton{
  text-decoration: underline;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 22px;
  font-size: 15px;
  border:none;
  font-family: "DM Serif Text", serif;
  color: black;
  
}
.websitelinkdiv{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  transition: background-color 0.15s;
}
.headernames{
  display: flex;
  flex-direction: column;
  transition: background-color 0.15s;
  margin-right: 10px;
}

.namep{
  border: none;
  font-family: "DM Serif Text", serif;
  font-size: 25px;
  margin-right: 15px;
  color: black;
  margin: 10px;
  margin-bottom: 0px;
}
.copyright{
  text-align: center;
  margin-top: 10px;  
  color: black;
}
a{
  text-decoration: none;
}

/*Der Abspann----------------------------------------------------------------------------------------------------------------------*/
.abspann{
  display: flex;
  justify-content:space-around;
}
.abspannbutton{
  font-family: "DM Serif Text", serif;
  font-size: 15px;
  margin-bottom: 30px;
  border:none;
  text-decoration: underline;
}
.abspannbutton:hover{
  cursor: pointer;
  text-decoration: underline;
  background-color: inherit;
}
/*Some other stuff----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
hr{
  margin: 0;
  height: 3px; 
  background-color: black;
  border: none;
}
.vl {
  margin-top:30px;
  margin-right:20px;
  border-left: 5px solid rgb(3,145,2);
  height: auto;
  align-self: stretch;
}
.spacer{
  border:15px, solid rgb(213, 215, 217);
  border-radius: 5px;
}

/*The burger menu--------------------------------------------------------------------------------------------------------------------------------------------*/
#menu__toggle:checked ~ .menu__btn {
  position: fixed;
  top: 30px;
  right: 30px;
}
#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  right: 0;
  left: auto;
}

.menu__btn {
  display: flex;
  align-items: center;
  top: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  cursor: pointer;
  z-index: 2;
  position: absolute;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 3px;

  background-color: black;

  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -10px;
}
.menu__btn > span::after {
  content: '';
  top: 10px;
}

.menu__box {
  left: auto; /* Ensure left is not applied */
  right: -100%; /* Position the menu box off the screen to the right */
  
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  
  width: 100%;
  height: 100%;

  margin: 0;
  

  list-style: none;

  background-color: rgb(213, 215, 217);
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);

  transition-duration: .15s;

  z-index: 1;
}

.menu__item {
  font-family: "DM Serif Text", serif;
  font-size: 30px;
  border:none;
  background-color: rgb(234, 237, 239) ;
  margin-top: 5px;
  padding:10px;
  background: transparent;
  color:black;
  text-decoration: none;
  text-align: center; 
  width: 100%;
  display: block;
}
.menu__item:hover {
  cursor: pointer;
  
}
.menu__itemdiv{
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  height: 100%;
}
.menu__item__home{
  font-family: "DM Serif Text", serif;
  font-size: 30px;
  border:none;
  background-color: rgb(234, 237, 239) ;
  margin-top: 5px;
  padding:10px;
  background: transparent;
  color:black;
  text-decoration: none;
  text-align: center;
  width: 100%;
  text-decoration: underline;
}

.hamburger-menu{
  display: none;
}
.menu__item__englisch{
  font-family: "DM Serif Text", serif;
  font-size: 30px;
  border:none;
  background-color: rgb(234, 237, 239) ;
  margin-top: 5px;
  padding:10px;
  background: transparent;
  color:rgb(3,145,2);
  text-decoration: none;
  text-align: center;
  width: 100%;
  
}




@media(max-width:430px){
  h1{
      font-size: 30px;
  }
}
@media(max-width:980px){
  .menubuttons {
      display: none;
  }

  burgermenu {
      display: block;
  }

  .mitglidertexthome {
      display: none;
  }

  .burgermenuicon {
      display: block;
  }
  .hamburger-menu{
      display: block;
  }
  .menu__btn{
      position: block;
      top:30px;
      right: 30px;
  }
  .homepagetext{
  font-size: 20px;
  text-align: center;
  }
}