body{

    font-family: Arial, Helvetica, sans-serif;
    background-color: grey;
    margin: 0 auto;
    padding: 0 auto;
    width: 100%;
    
     
}

header{
    background-image: url(../img/pc1.jpg) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70vh;
    text-align: center;

}

nav{
    color: white;
}

h1{
    text-align: center;
    color: white;
    font-family: 'Dancing Script', cursive;
}

h2{
    text-align: center;
    color: red;
}

h3{
    text-align: center;
    color: red;
    /* margin-top: 50px; */
    margin-bottom: 20px;
    text-decoration: underline;
}

h4{
    color: red;
    /* margin-top: 50px; */

}

h5{
    color: red;
    text-decoration: underline;

}


ul, li{
    list-style: none;
}

main{
    width: 100%;
    background-image: url(../img/ciel.jpg) !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10%;
    /* height: auto; */
    color: white;

}
.titre{
    display: inline-block;
    padding-top: 10%;
    animation: backInDown;
    animation-duration: 2s; 
}

.titre2{
    display: inline-block;
    animation: backInDown; 
    animation-duration: 3s; 
}


.progress{
    margin: 5px;
    /* margin-bottom: 8px; */
    height: 24px;
}

#a-propos, #formations, #experiences, #interets {
    padding-top: 2em;
    padding-bottom: 2em;
}


footer{
    background-color: black;
    padding-top: 30px;
    padding-bottom: 30px;
}

.photo{
    display: flex;
    justify-self: flex-end;
    background-repeat: no-repeat;
    background-position: center;
}

img{
    text-align: center;
    border-radius: 20%;
    animation: flipInX; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s; /* don't forget to set a duration! */


}
footer p{
    margin: 0 auto;
    padding: 0 auto;

}

/********** trois colonnes égales cotes à cotes **************/

.col-1{width: 8.333333%;}
.col-2{width: 16.666666%;}
.col-3{width: 25%;}
.col-4{width: 33.333333%;}

.col-5{width: 41.666666%;}
.col-6{width: 50%;}
.col-7{width: 58.333333%;}
.col-8{width: 66.666666%;}

.col-9{width: 75%;}
.col-10{width: 83.333333%;}
.col-11{width: 91.666666%;}
.col-12{width: 100%;}


/***************** les marges GAUCHE ************************/

.marge-1{margin-left: 8.333333%;}
.marge-2{margin-left: 16.666666%;}
.marge-3{margin-left: 25%;}

.marge-4{margin-left: 33.333333%;}
.marge-5{margin-left: 41.666666%;}
.marge-6{margin-left: 50%;}

.marge-7{margin-left: 58.333333%;}
.marge-8{margin-left: 66.666666%;}
.marge-9{margin-left: 75%;}

.marge-10{margin-left: 83.333333%;}
.marge-11{margin-left: 91.666666%;}
.marge-12{margin-left: 100%;}