@font-face {
    font-family: typo titre;
    src: url(fonts/ARK-ES-DenseBold.otf);
}


@font-face {
    font-family: typo sous titre;
    src: url(fonts/Frame.otf);
}

@font-face {
    font-family: typo lien;
    src: url(fonts/Meyrin.ttf);
}

@font-face {
    font-family: typo description;
    src: url(fonts/OfficeCodePro-Regular.ttf);
}


body {

    background-image: url(medias/fond.jpg);
background-repeat: no-repeat;
background-size:cover;
  background-attachment: fixed;
}
#defaultCanvas0 {
    position: fixed;
    top:0;
    left:0px;
    z-index: -10;
}




.blocgauche {
text-align: left;
display: inline-block;
width: 40%;
vertical-align: top;
margin-right: 40%;
font-size: 16px;
    
}

.typog { 
    color: black;
    font-family: typo sous titre;
    font-size: 25px;

}

.lieng {

    font-family: typo lien;
     background-color: white;
     color: rgb(161, 11, 43);
     font-size: 20px;

}


.imageg{
    width: 700px;
    margin-top: 10px;
    margin-bottom: 10px;
}




.separation {
    height: 300px;
}



.blocdroite {
display: inline-block;
width: 40%;
margin-left: 60%;
vertical-align:top;
text-align: right;
font-size: 16px;
}


.typod { 
    color: black;
    font-family: typo sous titre;
    font-size: 25px;
}

.liend {

    font-family: typo lien;
    background-color: white;
    color: rgb(161, 11, 43);
    font-size: 20px;

}

.imaged{
    width: 700px;
    margin-top: 10px;
}
















.description{ 
    font-family: typo description;
    font-size: 22px;
}









h1 {
   text-align: center;
    font-size: 130px;
    font-family: typo titre;
    color: black;
    margin-bottom: 50%;
}

.smile{

    top: 140px;
    margin-bottom: 80px;
    width: 100%;
    position: fixed;
      mix-blend-mode: multiply;
}

body{  

   margin: 20px;
    background-color: 	rgb(161, 11, 43);
    font-size: 0;
}





















































/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) 

{
.blocgauche {
text-align: left;
display: inline-block;
width: 40%;
vertical-align: top;
margin-right: 40%;
font-size: 10%;
    
}

.typog { 
    color: black;
    font-family: typo sous titre;
    font-size: 15px;}


.lieng {

    font-family: typo lien;
     background-color: white;
     color: rgb(161, 11, 43);
     font-size: 6.5px;

}


.imageg{
    width: 120px;
    margin-top: 10px;
    margin-bottom: 10px;
}




.separation {
    height: 100px;
}



.blocdroite {
display: inline-block;
width: 40%;
margin-left: 60%;
vertical-align:top;
text-align: right;
font-size: 10%;
}


.typod { 
    color: black;
    font-family: typo sous titre;
    font-size:15px;
}

.liend {

    font-family: typo lien;
    background-color: white;
    color: rgb(161, 11, 43);
    font-size:6.5px;

}

.imaged{
    width: 120px;
    margin-top: 10px;
}
















.description{ 
    font-family: typo description;
    font-size: 12px;

}









h1 {
   text-align: center;
    font-size: 50px;
    font-family: typo titre;
    color: black;
}

.smile{

    margin-bottom: 80px;
    width: 100%;
}

body{  

   margin: 20px;
    background-color: 	rgb(161, 11, 43);
    font-size: 0;
}


}