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: 9.8rem 1.5% 1.5% 1.5%;
   box-shadow: 1px 1px 2px #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.1em;
   font-weight: 200;
   letter-spacing: 0.3em;
   margin: 0% 5% 5px 5%;
   padding: 2% 2%;
   color: dimgray;
   background: #222222;
   border-bottom: 1px solid chocolate;

}

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

h4 {
   font-size: 0.9em;
   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;

}

.disco-text {
   font-size: 1.2em;
   letter-spacing: 0.2em;
   line-height: 1.6em;
   text-decoration: none;
   margin-left: 7%;
   color: #cececed8;
   
}
.disco-text-jahr {
   font-size: 1em;
   text-decoration: none;
   margin-left: 6%;
   color: #b9b9b9d8;
   line-height: 1.6em;
}

.cover-container {
   display: grid;
   margin-left: 7%;
   
   grid-template-columns: 200px 200px;
   grid-template-rows: 200px 1.2em;
   column-gap: 30px;
   row-gap: 2px;
   }
.cover {
   opacity: 90%;
   padding: 0;
   height: 100%;
   width: 100%;
}
.cover:hover {
   opacity: 100%;
}
.cover-container-other {
   display: grid;
   margin-left: 7%;
   
   grid-template-columns: 100px 100px 100px 100px ;
   grid-template-rows: 100px 50px 100px 2.0em;
   column-gap: 30px;
   row-gap: 2px;
   }
.cover2 {
   opacity: 90%;
   padding: 0;
   height: 100%;
   width: 100%;
}
.cover2:hover {
   opacity: 100%;
}
.header_pic {

   padding: 0;
   width: 90%;
   margin-left: 5%;
}

.statement {
   text-decoration: none;
   font-style: italic;
   font-size: 1.0em;
   line-height: 1.7em;
   margin-left: 7%;
   margin-right: 7%;
   color: #faf4d2d8;

}

.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%;
}


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

   header {
      width: 48%;
   }
}

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

   header {
      width: 75%;
   }
}

@media only screen and (max-width: 768px) {
   main {
      width: 94%;
      padding: 8.5rem 1.5% 1.5% 1.5%;
   }
   
   h1 {
     
      font-size: 1.6em;
      letter-spacing: 0.2em;
        
   }
   header {
      width: 94%;
   }
   .statement {
      text-decoration: none;
      font-style: italic;
      font-size: 0.85em;
      line-height: 1.7em;
      margin-left: 7%;
      margin-right: 7%;
      color: #faf4d2d8;
   
   }
   .cover-container {
      grid-template-columns: 140px 140px;
      grid-template-rows: 140px 1.2em;
      column-gap: 25px;
      row-gap: 2px;
   }
   .cover-container-other {
      display: grid;
      margin-left: 7%;
      grid-template-columns: 100px 100px 100px 100px ;
      grid-template-rows: 100px 40px 100px 1.6em;
      column-gap: 20px;
      row-gap: 2px;
   }
}

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

   .Details {
      font-size: 0.8em;

   }
   .cover-container-other {
      display: grid;
      margin-left: 7%;
      grid-template-columns: 80px 80px 80px 80px ;
      grid-template-rows: 80px 40px 80px 1.6em;
      column-gap: 15px;
      row-gap: 2px;
   }
}

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

   .Details {
      font-size: 0.8em;

   }
   .cover-container-other {
      display: grid;
      margin-left: 7%;
      grid-template-columns: 60px 60px 60px 60px ;
      grid-template-rows: 60px 35px 60px 1.6em;
      column-gap: 15px;
      row-gap: 2px;
   }
   .disco-text-jahr {
      font-size: 0.8em;
      text-decoration: none;
      margin-left: 7%;
      color: #b9b9b9d8;
      line-height: 1.6em;
   }
}