html {
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 62.5%;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
h1,h2{
    font-size: 2.5rem;
}
.flex{
    display: flex;
}

body{
    font-family: 'Cantarell', sans-serif;
    background: url(/picture/fond_cv.jpg) no-repeat center fixed;
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover; /* version standardisée */
    padding:0;
    margin:0;
    max-height: 100vh;
    min-height: 100vh;
    width:100%;
    flex-direction: column;
}
main{
    flex-grow:1;
}

main section:first-child{
    overflow: hidden;
    padding:4rem 2rem;
    width: 100%;
    /*height:49vh;*/
    font-size: 2.2rem;
    text-align: center;
}
main section:first-child p{
    text-shadow: 1rem 1rem 3rem white, 0 0 2rem white, 0 0 0.3rem white;
    text-align: center;
}
#Photo_Dan {
    float: left;
    width: auto;
    border-radius: 250px;
}
button{
    border-radius:12px 0 12px 0;
    border:none;
    color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(90deg, rgba(159,173,189,0.5) 0, rgba(41,73,101,0.7) 50%, hsla(220, 39%, 28%, 0.7) 93%, rgba(0,0,0,0.54) 100%);
    background: -moz-linear-gradient(0deg, rgba(159,173,189,0.5) 0, rgba(41,73,101,0.7) 50%, hsla(220, 39%, 28%, 0.7) 93%, rgba(0,0,0,0.54) 100%);
    background: linear-gradient(0deg, rgba(159,173,189,0.5) 0, rgba(41,73,101,0.7) 50%, hsla(220, 39%, 28%, 0.7) 93%, rgba(0,0,0,0.54) 100%);
}
main section:nth-child(2){
    display: flex;
    flex-direction: row;
}
main section:nth-child(2) article {
    width:50%;
}

/*!* Parcours *!*/
main article:nth-child(1) p,article:nth-child(1) h1{
    text-align: center;
}
main section:nth-child(2) article:nth-child(1){
    height: 50vh;
    overflow:scroll;
    overflow-x: hidden;
    text-align: center;
}
.contenu-parcours {
    text-align: center;
    position: relative;
    margin: 4% auto;
    border-radius: 1rem;
    padding: 1rem;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#484f4a+3,a8a37e+36&1+0,0+100 */

    background: -moz-linear-gradient(top, rgba(124, 136, 127, 1) 0%, rgba(132, 145, 136, 0.97) 3%, rgba(152, 159, 159, 0.85) 55%, rgba(168,163,126,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(124, 136, 127, 1) 0%,rgba(132, 145, 136, 0.97) 3%,rgba(152, 159, 159, 0.85) 55%,rgba(168,163,126,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(124, 136, 127, 1) 0%,rgba(132, 145, 136, 0.97) 3%,rgba(152, 159, 159, 0.85)) 55%,rgba(168,163,126,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484f4a', endColorstr='#00a8a37e',GradientType=0 ); /* IE6-9 */
    width: 90%;
}
.contenu-parcours > p{
    font-size:1.5rem;
}
.contenu-parcours > h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.contenu-parcours:first-of-type{
    margin-top: 0;
}
/* Compétence */
section:nth-child(2) article:nth-child(2) h2{
   text-align: center;

}
section:nth-child(2) article:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4%;
}
.progress{
    margin-bottom: 2rem;
    font-size: 1.75rem;
    height: 1.5rem;
}
.progress p {
    margin-bottom: 0;
    color: black;
}


.progress-bar {
    text-align: left;
    padding-left: 2%;
}

@media only screen and (max-width: 768px){
    body{
        height: 100%;
        /*background-image: none;*/
    }
    main section:first-child{
        height: 100%;
    }
    #Photo_Dan{
        display: block;
        float:none;
        margin: 0 auto;
    }
    main section:nth-child(2){
        flex-direction: column;
    }
    main section:nth-child(2) article:nth-child(1),main section:nth-child(2) article:nth-child(2){
        width: 100%;
    }
    .contenu-parcours > p{
        font-size:2rem;
    }
}