body {
  
    /* background: url(image/fond2.jpg) no-repeat 50% 100%, url(image/fond3.jpg) no-repeat 50% 0%;  */
   
    background-size: contain;
   position: relative;
    margin: 2.7em 1em;
    font-family: "Source Serif 4", serif;
    font-optical-sizing: auto;
    font-weight: 380;
    font-style: normal;
}

@font-face {
    font-family: 'boldonse';
    font-weight: 400; /* Graisse : regular */
    src: url('font/Boldonse-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'confortaa';
    font-weight: 400; /* Graisse : regular */
    src: url('font/Comfortaa-VariableFont_wght.woff2') format('woff2');
}

.intro{
    width:auto ;
    height: 80vh;
}

h1{
font-family: boldonse;
font-size: 3em;
margin-top: 40px;
display: block;
width: 219px;
height: 87px;
float: left;
margin-left: 10px;


    transition: color 500ms linear 0ms;
    color: rgb(196, 134, 255);
}

h1:hover {
    color: rgb(173, 47, 51)
}



p {
font-family: comfortaa;
    max-width: 65ch;
    font-size: 1.2em;
    line-height: 1.35;
    
    margin: 1em max(10%, 1em) 1.35em auto ;
    
transition: color 9500ms linear 0ms;
    color: black;
}

p:hover {
    color: rgba(255, 255, 255, 0)
}


blockquote {
    p{
padding-left: 4em;
    font-style: italic;
    font-family: boldonse;
    color: rgb(194, 128, 255);

    }
    
}

.citation{
font-family: boldonse;
max-width: 35ch;
    font-size: 1.2em;
    line-height: 1.35;
height: 87px;
float: left;
margin-left: 2px;

 transition: color 500ms linear 0ms;
    color: rgb(173, 47, 51);
}

.citation:hover {
    color: rgb(196, 134, 255)
}



p2{
font-family: boldonse;
    max-width: 45ch;
    font-size: 1.2em;
    line-height: 1.35;
    
    margin: 1em max(10%, 1em) 1.35em auto ;
transition: color 500ms linear 0ms;
    color: rgb(196, 134, 255);
}

p2:hover {
    color:  rgb(173, 47, 51)
}


hr {
    width: 2em;
    margin: 2em;
}
a {
    color: rgb(212, 113, 255);
}