body {
   background: rgb(65, 73, 71);
   margin: 0;


}

main {
   font-family: "Raleway";
   font-weight: 300;
   line-height: 1.5;
   background: rgb(18, 18, 18);
   width: 36%;
   margin: 0 auto;
   /* top | right | bottom | left */
   padding: 11rem 1.5% 1.5% 1.5%;
   box-shadow: 2px 2px 4px #333333;
   
  
}

header {
   height: 6.5rem;
   position: fixed;
   top: 0;
   width: 36%;
   background: rgb(18, 18, 18);
   padding: 2rem 0 0 0;
   z-index: 100;
}


h1 {
   text-shadow: 1px 1px 1px rgb(26, 25, 25);
   font-size: 2.4em;
   font-weight: 200;
   letter-spacing: 0.5em;
   margin: 0 5% 5px 5%;
   padding: 1% 2%;
   color: dimgray;
   background: #222222;
   border-bottom: 1px solid chocolate;

}

.h1a {
   text-shadow: 1px 1px 1px rgb(26, 25, 25);
   font-size: 1.8em;
   font-weight: 200;
   letter-spacing: 0.4em;
   margin: 1% 5% 5px 5%;
   padding: 1% 2%;
   color: dimgray;
   background: #222222;
   border-bottom: 1px solid chocolate;

}

h2 {
   font-size: 1.2em;
   margin-top: 0;
   margin-left: 1;
   color: dimgray;
   text-align: right;
   padding-right: 5%;
}

h3 {
   text-align: center;
   font-size: 1.2em;
   margin-top: 0;
   color: dimgray;
}

h4 {
   margin: 0;
   margin-left: 6%;
   letter-spacing: 5px;
   color: dimgray;
}

h5 {
   font-size: 0.6em;
   margin-top: 0;
   margin-bottom: 3%;
   text-align: center;
   color: dimgray;
}

h6 {
   text-decoration: none;
   font-size: 0.7em;
   margin-left: 7%;
   margin-top: 0.5%;
   padding: 0;
   text-align: left;
   color: dimgray;


}

.Titelliste {
   text-decoration: none;
   margin-left: 7%;
   color: #faf4d2d8;
   line-height: 1.6em;
}

.cover {

   width: 35%;
   height: 35%;
   margin-left: 7%;
}

.close_btn {
   opacity: 5%;
   width: 35%;
   height: 35%;
   margin-left: 7%;
}
.close_btn:hover {
   opacity: 12%;
   
}
.Details {
   font-size: 0.9em;
   line-height: 1.8em;
   color: #faf4d2d8;
   margin-left: 7%;

}

#Text_Statement {
   text-decoration: none;
   font-style: italic;
   font-size: 0.9em;
   line-height: 1.7em;
   margin-left: 7%;
   margin-right: 7%;
   color: #bbbbbb;

}

.Line1 {
   margin: 5%;

   border-bottom: 1px solid chocolate;
}

.Kontakt {

   text-decoration: none;
   text-align: center;
   color: dimgray;
}

.LinkStandard {
   text-decoration: none;
   color: dimgray;
}

.Impressum {
   font-size: 0.8em;
   text-align: center;
   margin-bottom: 3%;
}


.Listen {
   text-decoration: none;
  
   display: block;
   padding: 0%;
   margin-left: 7%;
        
}
.Listen2 {
   height: 42px;
   text-decoration: none;
   padding-right: 2%;
   opacity: 55%;
   
}
.Listen2:hover {
   opacity: 100%;
   text-decoration: none;
}



@media only screen and (max-width: 1920px) {
   main {
      width: 48%;
   }

   header {
      width: 48%;
   }
}

@media only screen and (max-width: 1280px) {
   main {
      width: 65%;
   }

   header {
      width: 65%;
   }
}

@media only screen and (max-width: 768px) {
   main {
      width: 94%;
      
   }

   header {
      width: 94%;
   }

   .Listen2 {
      
      opacity: 80%;
      
   }
}

@media only screen and (max-width: 400px) {
  
   main {
      font-size: 0.9em;
      width: 100%;
      padding: 7.5rem 0.5% 1.5% 0.5%;
      
   }
   header {
      width: 100%;
      height: 6rem;
      font-size: .8em;
      padding: 1rem 0 0 0;
   }

   .Details {
      font-size: 0.8em;

   }
}