*{
    padding: 0px;
    margin: 0px;
}
body{
    width: 100%;
    background-color: white;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
}
#banniere{
    max-width: 100%;
}

#citation{
    margin: 0.7vw;
    font-size: 2vw;
    text-align: center;
    font-weight: bold;
}


    /*Début des "div"*/

#main-div{
    position: relative;
    margin: auto;
    margin-bottom: 1.7vw;
    height: 75vw;
    width: 75%;
}

    /*Début du "nav"*/

h2{
    font-size: 1.4vw;
    margin: 1vw 0 0 3.2vw;
}

nav{
    margin-top: 2vw;
    width: 100%;
}
nav li{
    list-style-type: none;
    float: left;
    margin: 0 3vw 0 3vw;
}
nav a{
    display: inline-block;
    text-decoration: none;
    padding: 1.2vw 1.4vw;
    text-transform: uppercase;
    font-size: 2.5vw;
    color: black;
    font-weight: 200;
}
#div-nav{
    display: table;
    margin: 0 auto;
}
#nav-accueil:hover{color: #f50c81; background-color : #fdfdfd; border-radius: 5px}
#nav-decouvrir:hover{color: #f50c81; background-color : #fdfdfd; border-radius: 5px}

    /*Fin du "nav"*/

    /*Début de l'autobiographie*/

#autobio{
    font-size: 1.3vw;
    text-align: justify;
}
#photo-fanny{
    width: 30vw;
    height: 40vw;       /*De base du 30x40vw*/
    margin: auto 7vw;
}
#div-autobio{padding: 0 2vw 2vw 2vw; border-bottom: 0.7px solid black}
#div-autobio div{margin: 4vw 0 0 0; display: inline-block; width: 49%}

    /*Fin de l'autobiographie*/

#div-reseaux{
    height: 13.5vw;
    width: 70%;
    bottom: 1vw;
    border-radius: 25px;
    position: absolute;
    margin-left: 15%;
    transition: height 1s ease;
} #div-reseaux:hover{height: 15vw}

.logos-reseaux{
    height: 5.5vw;
    width: 5.5vw;
    margin: 5% 0 0 16.7%;
}

footer{
    width: 100%;
    background-color: gray;
}
footer p{
    font-size: 20px;
    text-align: center;
    padding: 10px;
}
footer a{
    text-decoration: none;
}


    /*Fin des "div"*/
    /*Début du @media querries*/

@media screen and (min-width: 1100px) and (max-width: 1300px){
    #main-div{width: 80%}
}

@media screen and (min-width: 800px) and (max-width: 1100px){
    #main-div{width: 85%}
}

@media screen and (min-width: 450px) and (max-width: 800px){
    #main-div{width: 90%}
}

        /*Fin du @media querries*/
        
        
        /* VERSION TELEPHONE */

@media screen and (max-width: 450px){
    #main-div{width: 95%; height: 285vw}
    
    #citation{font-size: 3.5vw}
    
    #nav-accueil{font-size: 5vw; background-color: #fafafa}
    #nav-decouvrir{font-size: 5vw; background-color: #fafafa}
    
    #div-autobio{font-size: 70vw}
    #autobio{font-size: 4vw}
    
    #photo-fanny{width: 45vw; height: 62vw; position: center}
    
    #div-autobio{margin: 7vw 0 auto; padding: 0 2vw; text-align: center}
    #div-autobio div{display: block; width: 100%}
    
    h2{margin: 1vw 0 0 5vw; font-size: 4.3vw}
    
    #div-reseaux{height: 40vw; width: 75%; margin-left: 10%}
    
    #div-reseaux:hover{height: 40vw}
    
    .logos-reseaux{
        height: 11.5vw;
        width: 11.5vw;
        margin: 5% 0 0 22%;
    }#pinterest-tel{margin: 5% 0 0 41.5%}

    footer p{
        font-size: 10px;
    }
}