@font-face {
    font-family: karrik;
    src: url(fonts/Karrik-Regular.ttf);
}

@font-face {
    font-family: heal;
    src: url(fonts/HealTheWebA-Regular.otf);
}

.heal {
    font-family: heal;
    line-height: 0.7;
}

body, html{
    
   
   
    
   
    background-image: url(medias/DSCN2062.png);
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}




h1{
    font-family: karrik;
    font-size: 80px;
    text-align: center;
    color: rgb(120, 205, 138);
    margin-bottom: 5px;
    text-shadow:
  1px 1px 2px rgb(0, 255, 102),
  0 0 1em rgb(166, 0, 255),
  0 0 0.2em rgb(84, 33, 164);


  
}

#blocinfo{
    font-family: heal;
    color: rgb(120, 205, 138);
    font-size: 35px;
    margin-top: 5px;

  
   

}

h3, h4, h5{
    display: inline-block;
    width: 32%;
    vertical-align: top;
    
   
}

h4{
    text-align: center;
}

h5{
    text-align: right;
    
}

#artisteun {
    font-family: karrik;
    color: rgb(120, 205, 138);
    font-size: 4vw;
  
  

    /*width: 140%;
 
  display: flex;
  justify-content: space-between;*/
  
 
}


#artistedeux {
    font-family: karrik;
    color: rgb(120, 205, 138);
    font-size: 4vw;
    

    /*display: inline-block;
    width: 25%;*/
 
    
    

    /*width: 140%;
 
  display: flex;
  justify-content: space-between;*/

}

#artun, #artdeux, #arttrois, #artquatre, #artcinq, #artsix {
   background-color: beige;
   
    display: inline-block;
    vertical-align: top;
    
    width: 24%;
    height: 300px;
    line-height: 0.8;
    margin-bottom: 20px;
    margin-left: 1px;

    position: relative;
    top:0px;
    
    
 
}

#artiun, #artideux, #artitrois, #artiquatre, #articinq, #artisix {
    background-color: beige;
    display: inline-block;
    vertical-align: top;
    width: 24%;
    height: 330px;
    line-height: 0.8;
    margin-bottom: 10px;
  
    margin-left: 1px;
    position: relative;
   
   
}



#soustitreun {
    font-family: karrik;
    font-size: 30px;
   
    color: rgb(120, 205, 138);
    text-align: center;
    
}

#soustitredeux {
    font-family: karrik;
    font-size: 30px;
    color: rgb(120, 205, 138);
    text-align: center;
}



#bloccharte, #blocrestauration, #blocdev, #blocenv {

    display: inline-block;
    vertical-align: top;
    width: 22%;
    margin-right: 2%;


}

h6{
    font-family: heal;
    font-size: 35px;

    text-shadow:
    1px 1px 2px rgb(0, 255, 102),
    0 0 1em rgb(21, 3, 31),
    0 0 1em rgb(84, 33, 164);

    margin-bottom: 0%;
    color: rgb(120, 205, 138);
    text-align: center;
   
}




#textedev, #textecharte, #texterestau, #texte, #texteenv { 
    color: rgb(84, 33, 164);
    font-family: karrik;
    text-align: center;
   
    
}


#textedev, #textecharte, #texterestau, #texteenv { 
    background-color: beige;
   
   
    
}


#crédit{
    color: aliceblue;
    font-family: karrik;
    text-align: center;

}
.hide{display: none;}

.bouton {
    cursor: pointer;
}

/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) {
    
    
    body{
       
        overflow-x: hidden;
    }
    
    
    h1{
        font-family: karrik;
        font-size:80px;
        text-align: center;
        color: rgb(120, 205, 138);
        margin-bottom: 5px;
        
    }
    
    #blocinfo{
       
        
       
        margin-left: 10px;
        margin-right: 10px;
    
    }
    
    
    h4, h5, h3{
        text-align: center;
        width: 100%;
        font-size: 35px;
    }

    #soustitreun, #soustitredeux {
        font-size: 35px;
    } 

    #bloccharte, #blocenv, #blocdev, #blocrestauration {
        width: 100%; } 
     
    
    
    
    
    #artisteun {

    font-size: 7vw;
        }

        #artistedeux {

            font-size: 7vw;
                }  

    #artiun, #artideux, #artitrois, #artiquatre, #articinq, #artisix {
                  background-color: beige;
                    display: inline-block;
                    vertical-align: top;
                    width: 47%;
                    height: 220px;
                    line-height: 0.8;
                    margin-bottom: 10px;
                  
                    margin-left: 5px; }

                    #artun, #artdeux, #arttrois, #artquatre, #artcinq, #artsix {
                        background-color: beige;
                        
                         display: inline-block;
                         vertical-align: top;
                         
                         width: 47%;
                         height: 220px;
                         line-height: 0.8;
                         margin-bottom: 10px;
                         margin-left: 5px;
                     
                        
                         
                         
                      
                     }
                   }