* {
    margin: 0;
  }
  
  body {
    font-family: 'Manrope', sans-serif;
    font-size: 100%;
    background-color:rgb(16, 34, 17);   
  }
  
  nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center ;
    
  }
 
header {
  padding: 20px;
  margin-bottom: 50px;
.box{
  padding-bottom: 50px;
}
}
  nav a {
    margin-left: 30px;
    font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
    /*font-family: 'Times New Roman', Times, serif;*/
    font-size: 1.3em;
    color: beige;   
}

@media screen and (max-width: 996px) {
  header nav {
    display: flex;
    flex-direction: row;
    justify-content: left;
    font-size: 2em;
  }
}
main{
  padding-bottom: 50px;
}
footer{
  display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content 50px;
color:rgb(16, 34, 17);
}
.tete{
  display:flex;
  justify-content: center;
  padding-bottom: 40px;
}
.tete p, h1{
  font-family: 'Times New Roman', Times, serif;
  font-size: 3em;
  font-weight: lighter;
  color: grey;
}
.dos-kemp {
      width: 300px;    
      background-image: url(images/Dos1.JPG);
      height: 496px ;
      margin: auto;
}
@media screen and (max-width: 996px){
  .dos-kemp{
    width: 500px;    
    background-image: url(images/Dos2.JPG);
    height: 826px ;
    margin: auto; 
  }
  
}
.dos-kemp h1 {
      padding-top: 50px;
      font-family: 'Times New Roman', Times, serif;
      font-size: 2em;
      text-align: center; 
      color:black;  
}
.dos-kemp h2 { 
      font-family: 'Times New Roman', Times, serif;
      font-size: 1.5em;
      font-weight: lighter;
      text-align: center; 
}
@media screen and (max-width: 996px){
  .dos-kemp h1 {
    padding-top: 80px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.8em;
    text-align: center; 
    color: black;  
  }
.dos-kemp h2 { 
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.2em;
    font-weight: lighter;
    text-align: center; 
  }
}
.violons {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  padding-bottom: 50px;
}
h2{
  color: black;
}
h3{
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  /*font-family: 'Times New Roman', Times, serif;*/
  font-size: 1.5em;
  color:grey;
  color:grey;
}
@media screen and (max-width: 996px){
  h3{
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  /*font-family: 'Times New Roman', Times, serif;*/
  font-size: 2em;
  color:grey;
  }
}
/*.violons h4{
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  font-size: 1.1em ;
  color:grey;
}*/
.titre{
  display: flex;
  justify-content: center;
}
.titre h1{
  font-size: 1.5em;
}
@media screen and (max-width: 996px){
  .titre h1{
    font-size: 2em;
  }
}
.kemp-grid{
  /*font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  font-size: 1.2em;*/
  display: grid;
  padding: 50px;
  text-align: end;
  justify-content: center;
  grid-template-columns: 200px 150px 200px 150px;
  grid-auto-rows: 200px ;
  gap: 15px;
}
.kemp-grid div{
  height: 200px;
}
.kemp-grid div p{
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  font-size: 1.5rem ;
  color:grey;
}
.kemp-grid div img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 996px) {
  .violons{
    display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows:auto;
  padding-bottom: 50px; 

  }
  .violons {
    font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  
    color:grey; 
  }
}
  @media screen and (max-width: 996px){
  .kemp-grid{
    /*font-size: 2em;*/
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 0.7fr;
    /*grid-template-rows: 350px 350px 350px 350px 350px 350px 350px 350px 350px ;*/
    grid-auto-rows: 350px;
    justify-content: left;
    gap: 15px;
  }
  .kemp-grid div{
    height: 350px;
  }
  .kemp-grid div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .kemp-grid div p{
    font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
    font-size: 3.5rem ;
    color:grey;  
  }
}
.instruments-grid2{
  padding: 50px;
  display: grid;
  justify-content: center;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 300px 300px ;
  gap: 15px; 
}

.instruments-grid2 div img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 996px) {
  .instruments-grid2{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 700px 700px 700px 700px 700px ;
    gap: 15px;
  }
}
.livre{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30px;
  text-align: left;
  padding: 50px;  
  color: beige;
}
.livre p{
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  /*font-family: 'Times New Roman', Times, serif;*/
  font-size: 1em;
}
.livre-grid{
  padding-left: 50px;
  padding-top: 50px;
  display: grid;
  text-align: right;
  justify-content: left;
  grid-template-columns: 150px 150px 150px 150px;
  /*grid-template-rows: 150px  ;*/
  grid-template-rows: 0.8fr  ;
  gap: 15px; 
  color:grey
}
.livre-grid div img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 996px){
  .livre-grid{
    padding-left: 5px;
    padding-right: 50px;
    padding-top: 50px;
    display: grid;
    text-align: right;
    justify-content: left;
    grid-template-columns: 0.8fr 0.8fr 0.8fr 0.8fr ;
    grid-template-rows: 0.8fr  ;
    gap: 15px; 
    color:grey 
  }
}
.strad{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30px;
  text-align: left;
  padding: 50px;  
  color: grey;
}
.strad p{
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  /*font-family: 'Times New Roman', Times, serif;*/
  font-size: 1em;
}
.strad-grid{
  padding: 50px;
  display: grid;
  text-align: right;
  justify-content: left;
  grid-template-columns: 150px 150px 150px 150px;
  /*grid-template-rows: 150px  ;*/
  grid-template-rows: 0.8fr  ;
  gap: 15px; 
  color: grey;
}
.strad-grid div img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 996px){
  .strad-grid{
  padding: 50px;
  display: grid;
  text-align: right;
  justify-content: left;
  grid-template-columns: 0.8fr 0.8fr 0.8fr 0.8fr ;
  grid-template-rows: 0.8fr  ;
  gap: 15px;  
  color: grey;
  }
}
.adresse{
  display: grid;  
  grid-template-columns: 150px 150px  ;
  grid-template-rows: 120px  ;
  gap: 15px; 
  padding-left:25%;
  padding-top: 10px;
}
.adresse div h4{
  font-family: 'Times New Roman', Times, serif;
  font-size: 1em;
  color: grey;
}
.adresse div a{
  font-family: 'manrope', sans-serif;
  font-size: 1em;
  text-decoration: underline;
  font-stretch: ultra-expanded;
  color: beige;
}
.adresse p{
  font-family: 'manrope', sans-serif;
  /*font-family: 'Times New Roman', Times, serif;*/
  font-size: 1em;
  font-stretch: ultra-expanded;
  color: beige;
}
@media screen and (max-width: 996px){
  .adresse{
    display: grid;  
    grid-template-columns: 200px 350px  ;
    grid-template-rows: auto  ;
    gap: 15px; 
    padding-left:5%;
    padding-top: 20px;
  }
  .adresse div h4{
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.5em;
    color: grey;
  }
  .adresse div a{
    font-family: 'manrope', sans-serif;
    font-size: 1.5em;
    text-decoration-line: underline;
    font-stretch: ultra-expanded;
    color: beige;
  }
  .adresse p{
    font-family: 'manrope', sans-serif;
    /*font-family: 'Times New Roman', Times, serif;*/
    font-size: 1.5em;
    font-stretch: ultra-expanded;
    color: beige;
  }
}
.photo{ 
  display: block;
  padding: 50px;
  text-align: center;
 width: 60%;
 margin: auto;
 margin-bottom: 50px;
}
@media screen and (max-width: 996px){
  .photo{
    display: block;
    width: 80%;
  }
}
.photo img{
  width: 300px;
  float: left;
  margin: 10px;
}
.photo p{
  text-align: justify;
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  /*font-family: 'Times New Roman', Times, serif;*/
  font-size: 1.2em;
  color: beige;
}
@media screen and (max-width: 996px) {
  .photo p{
    text-align: justify;
    font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
    /*font-family: 'Times New Roman', Times, serif;*/
    font-size: 1.2em;
    color: beige; 
  }
}
.archet{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30px;
  text-align: left;
  padding: 50px;  
  color: grey;
  gap: 15px;
}
.archet h3{
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  color: grey;
}
.archet_alto{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30px;
  text-align: left;
  padding: 50px;  
  color: grey;
  gap: 15px;
}
.archet_alto h3{
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  color: grey;
}
.archetier p{
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  /*font-family: 'Times New Roman', Times, serif;*/
  font-size: 1.2em;
}
.archetier{
  grid-area: nm;
}
.archet-tete{
  grid-area: vt;
}
.archet-hausse{
  grid-area: vh;
}

@media screen and (max-width: 996px){
  .archetier{
    height: 30px;
  }
  .archetier p{
    font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
    /*font-family: 'Times New Roman', Times, serif;*/
    font-size: 30px;
  } 
}
.archet-grid{
  padding-left: 50px;
  padding-top: 50px;
  display: grid;
  text-align: left;
  justify-content: center;
  align-content: center;
  grid-template-columns: 40% 40% ;
  grid-template-rows:30px 140px ;
  grid-template-areas: "nm nm"
                        "vt vh";
  gap: 20px; 
  color:rgb(165, 165, 165);
}
.archet-grid div img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.liens{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30px;
  text-align: left;
  padding: 50px;  
  color: beige;
}
.liens h3{
  padding-left: 200px;
  font-family: 'cormorant',Georgia, 'Times New Roman', Times, serif;
  /*font-family: 'Times New Roman', Times, serif;*/
  font-size: 1.5em;
  color: beige;
}
.liens-grid{
  padding-top: 50px;
  padding-left: 250px;
  padding-right: 50px;
  padding-bottom: 10px;
  display: grid;
  text-align: right;
  justify-content: left;
  grid-template-columns: 250px 150px;
  grid-template-rows: 150px  ;
  gap: 15px; 
}
.liens-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 996px){
  .liens-grid{
  padding-top: 50px;
  padding-left: 80px;
  padding-right: 50px;
  padding-bottom: 10px;
  display: grid;
  text-align: left;
  justify-content: left;
  grid-template-columns: 1fr 0.8fr;
  grid-template-rows: 0.8fr  ;
  gap: 25px;  
  }
}
/*.liste div img{
  width: 50%;
  height: 50%;
  object-fit: cover;
}*/

#liste2 {
  display: flexbox;
  width: 600px;
  height: auto;
  padding-top: 30px;
  padding-right: 150px;
  padding-bottom: 10px;
  padding-left: 150px;
  margin: auto;
/*color:rgb(16, 34, 17);*/
}
@media screen and (max-width: 996px){
  #liste2 {
    display: flexbox;
    width: auto;
    height: auto;
    padding-top: 30px;
    padding-right: 150px;
    padding-bottom: 10px;
    padding-left: 150px;
    margin: auto;
  /*color:rgb(16, 34, 17);*/
  }  
}
.my-button{
  cursor: pointer;
}
#liste2 button{
  border: none;
  color:rgb(16, 34, 17);
  background-color:rgb(16, 34, 17) ;
}
@media screen and (max-width: 996px){
  #liste2 button{
    border: none;
    color:rgb(16, 34, 17);
    background-color:rgb(16, 34, 17) ;
  } 
}
#liste2 img {
  display: none;
   width: 100%;
   object-fit: cover; 
}
@media screen and (max-width: 996px){
  #liste2 img {
    display: none;
     width: 100%;
     object-fit: cover; 
  } 
}
/*#liste2 button{
  border: none;
  color:rgb(16, 34, 17);
  background-color:rgb(16, 34, 17) ;
}*/
#liste3 {
  display: flexbox;
  width: 80%;
  height: auto;
  padding-top: 30px;
  padding-right: 150px;
  padding-bottom: 10px;
  padding-left: 150px;
  margin: auto;
/*color:rgb(16, 34, 17);*/
}
@media screen and (max-width: 996px){
  #liste3 {
    display: flexbox;
    width: 80%;
    height: auto;
    padding-top: 30px;
    padding-right: 150px;
    padding-bottom: 10px;
    padding-left: 150px;
    margin: auto;
  /*color:rgb(16, 34, 17);*/
  } 
}
#liste3 img {
  display:none;
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 996px){
  #liste3 img {
    display:none;
    width: 100%;
    object-fit: cover;
  } 
}
#liste3 button{
  border: none;
  color:rgb(16, 34, 17);
  background-color:rgb(16, 34, 17) ;
}
@media screen and (max-width: 996px){
  #liste3 button{
    border: none;
    color:rgb(16, 34, 17);
    background-color:rgb(16, 34, 17) ;
  }
}