*
{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body
{
    margin: 20px;
    font-size: 1.2em;
}

/*----------------- commun --------------------*/
.text-mid
{
    text-align: center;
}

.flex-col
{
    display: flex;
    flex-direction: column;
}

.flex-row
{
    margin: 3%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.longueur20
{
    width: 20%;
    min-width: 150px;
}

.longueur50
{
    width: 50%;
}

.longueur80
{
    width: 80%;
}

.longueur-max
{
    width: 100%;
}

.marge-auto
{
    margin: auto;
}

.margin-left-5
{
    margin-left: -5%;
}

.margin-left-4
{
    margin-left: 4%;
}

.margin-left-10
{
    margin-left: 10%;
}

.border
{
    border: 2px solid black;
}

/*--------------------------------------------*/

header 
{
    display: flex;
    flex-direction: column;
}

.entete-image
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.name
{
    font-size: 2em;
    margin: 4%;
    width: auto;
}

.recherche
{
    color: white;
    width: 100%;
    height: 5vw;
    font-size: 3vw;
    background-image: linear-gradient(90deg, rgb(253, 90, 19) , rgb(204, 62, 1), rgb(204, 62, 1), rgb(253, 90, 19) );
}

#centre
{
    margin: 1%;
    display: flex;
    flex-direction: row;
}

#marge
{
    width: 35%;
    min-width: 210px;
    max-width: 300px;
    display : flex;
    flex-direction: column;
    background-image: linear-gradient(180deg, rgb(25, 118, 211) , rgb(9, 49, 88));
    padding: 1%;
}

.skill
{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 5px 0 0 0;
}

.barre
{
    margin: 1% 2.5% 1% 2.5%;
    border: 1px black solid;
    height: auto;
    font-size: 2vw;
    width: 90%;
    max-width: 200px;
    background-color: rgb(216, 216, 216);
}

.nivo95
{
    color: white;
    width: 95%;
    background-color: rgb(35, 174, 74);
}

.nivo80
{
    color: white;
    width: 80%;
    background-color: rgb(35, 174, 74);
}

.nivo75
{
    color: white;
    width: 75%;
    background-color: rgb(35, 174, 74);
}

.nivo70
{
    color: white;
    width: 70%;
    background-color: rgb(35, 174, 74);
}

.nivo35
{
    color: white;
    width: 35%;
    background-color: rgb(35, 174, 74);
}

.nivo5
{
    color: white;
    width: 5%;
    background-color: rgb(35, 174, 74);
}

#center-right
{
    width: 100%;
    margin: 3% 0 0 1%;
    display: flex;
    flex-direction: column;
}

h2
{
    width: 100%;
    border: 2px black solid;
    text-align: center;
}