@font-face {

    font-family: "arbutus";
    src: url(../font/ArbutusSlab-Regular.ttf);
}

@font-face {

    font-family: "authenticsans90";
    src: url(../font/AUTHENTICSans-90.otf);
}

@font-face {

    font-family: "authenticsans60";
    src: url(../font/AUTHENTICSans-60.otf);

}

@font-face {

    font-family: "authenticcondensed90";
    src: url(../font/AUTHENTICSans-Condensed-90.otf);

}

img {


    width : 50%
   
    
}

header {

    
    margin-top: 23px;
    height : 265px;

}

h1 {
    font-family: authenticsans90 ;
    margin-left: 20px;
    font-size: 20px;
    text-decoration: underline;
}

h5 {

    font-family: authenticsans90 ;
    margin-left: 20px;
    font-size: 13px;
    margin-right: 20px;

}

main {

margin-right: 40px;
margin-left: 60px ;
}

pre {

    position: fixed;
    z-index:  -3;
}

p {

    font-family: authenticsans90 ;
    font-size: 15px;
    margin-right: 100px;
    margin-left: 20px;
}

a {
 
    font-family: authenticsans90 ;
    margin-left: 20px;
    color: rgb(241, 65, 247);

}

video {

    width : 100%;
}

.projetpre {

    margin-top: 0;
    margin-bottom: 20px;
  
}

.presentation {
    display: none;
    padding-top: 10pt;
    padding-bottom: 10pt;
    padding-left: 60pt;
    background-color: rgb(255, 255, 255);
    box-shadow: 5px 5px 5px rgb(231, 78, 7);
    border-radius: 60%;
    width: 60vw;
    
}




.infos {

    font-family: authenticsans90;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    font-size: 15pt;
    box-shadow: 5px 5px 5px rgb(231, 78, 7);

}

.retour a{


    font-family: authenticsans90;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    font-size: 15pt;
    box-shadow: 5px 5px 5px rgb(231, 78, 7);
    margin-left: 35pt;
    color : black; 
    text-decoration: none;

}

.retour a:hover {

    color: rgb(241, 65, 247);
    box-shadow: none;

}



.images {

    margin-top: -120px;
    margin-left: 8vw;
    display: inline-block;
   
}

.imagegrand {

    width: 90%;

}

.imglivreouvert {

    width : 100%; 

}

.infos:hover + .presentation{

    display:block; 
    position: absolute;
    z-index: 10;
}



/* PAGE VIDE */ 

.images {

    width: 80%;
    margin-top: -115pt;
}

.images2 {

    width: 60%;


}

.images4 {

    width: 50%;
    margin-left: 45%;
    margin-top: -20pt;
}


.date {

font-size : 9pt; 

}

@media screen and (max-width: 915px) {

    main {

     display: inline-block;

    }

    img {

        width: 85%;
    }

    pre {

   

            white-space: break-spaces;
    
        
        }

    
        .presentation {
            display: block;
            width: 100%;
            
        }
  
        .images {

            margin-top: -10pt;

        }
}