.center {
    text-align:center;
}

.left {
    text-align:left;
}

.right {
    text-align:right;
}

/*text-decoration: line-through; = barrer le texte*/
body {
    background-color: rgb(240,235,210);
    /*width: calc(100% - 150px); pour que les bords s'arrêtent au max à 75px a droite et a gauche*/
    margin: 70px 75px 35px 75px; /*top right bottom left*/
    padding: 25px;
    border: 3px solid rgb(0, 0, 0);
    border-radius: 60px;
    color: rgb(0, 0, 0);
    font-family: Arial, Helvetica, sans-serif;;
    text-align:center;
}

#accueilButton{
    font-size: large;
}

#header, #header #contener22, #header #contener32, #header #contener42, #contener5 #contener62, #contener5 #contener92, #contener5 #contener102, #MySQL, #PostgresSQL, #Linux, #Ubuntu, #Gitlab, #WDPHPMyA, #timelineDev, #timelineOther{
    border: 3px solid rgb(0, 0, 0);
}

#competences{
    font-size: x-large;
    height: 25%;
}


/*Langages*/
#HTML, #CSS, #JS, #PHP, #Python, #SQL{
    height: auto;
}
#HTML, #CSS{    
    width: 8%;
}

#JS{
    width: 10.15%;
}

#PHP{
    width: 13%;
}

#Python{
    width: 12%;
}

#SQL{
    width: 17%;
}

/*Systemes*/
#MySQL, #PostgresSQL, #Windows7, #Windows8, #Windows10, #Windows11, #Linux, #Ubuntu{
    height: auto;
}

#MySQL, #PostgresSQL, #Windows7, #Windows8, #Windows10, #Ubuntu{
    height: auto;
    width: 10%;
}

#Windows11{
    width: 13%;
}

#Linux{
    width: 8%;
}

/*Gestion*/
#GLPI, #PacketTracer, #WinDesign, #PHPMyAdmin{
    width: 150px;
    height: auto;
}

#Pearltrees{
    width: 100px;
    height: auto;
}

/*OutilsDev*/
#VSCode, #Gitlab, #Youtube{
    height: 40%;
}

#VSCode{
    width: 265px;
}

#Gitlab{
    width: 200px;
}

#Youtube{
    width: 200px;
}

/*Divs*/
#contener5, #contener6, #contenerTimeLines{
    padding: auto; /*top right bottom left*/
    /*border: 2px solid white;*/    
    display: flex;
    justify-content: center;
    gap: 2%; /*espacement entre 2 div*/
    width: auto;
}

#contenerGestion{
    height: 25%;
    width: auto;
    margin-left: 50px;
    margin-right: 1px;
    padding: auto;
}

#contenerWriteSkills{
    width: 50%;
    margin-left: 20px;
    padding-right: 30px;
    border-left: 3px solid rgb(0, 0, 0);
    border-right: 3px solid rgb(0, 0, 0);
}

#contenerWriteSkills ul{
    margin-top: 35px;
}

#contener82{
    padding-right: 2%;
    padding-left: 2%;
    height: 100%;
    width: auto;
}

.contener92{
    padding: 1%;
    vertical-align: middle;
    /*border: 2px solid white;*/
    width: 50%;
    height: auto;
    text-align: center;    
}
.contener2{
    display: flex;
    justify-content: center;
    gap: 15%; /*espacement entre 2 div*/
}
#GLPIdiv, #PacketTracerdiv, #WDPHPMyA, #Pearltreesdiv{
    max-width: 100%;
    height: auto;
    gap: 2%; /*espacement entre 2 div*/
    justify-content: center;
}

.timelineActivityLeader{
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;/*box qui ne s'agrandit pas*/
    border-left: 3px solid rgb(0, 0, 0);
    border-right: 3px solid rgb(0, 0, 0);
}

.timeline-object{
    display: flex;
    margin-top: 0px;
    position: relative;
    padding-left: 22.5px;
}

#timelineDev.timeline-object.complete::after:second-child{
    height: 200px;
}

.timeline-object.empty::after{
    content: '';
    width: 4px;
    height: 100px;
    background-color: blueviolet;
    top: 50px;
    position: absolute;
}

.timeline-object.empty .timeline-status{
    background-color: rgb(240,235,210);
    border: 4px solid blue
}

.timeline-object.complete::after{
    content: '';
    width: 4px;
    height: 150px;
    background-color: blueviolet;
    top: 50px;
    position: absolute;
    grid-column: auto;
}

.timeline-status{
    height: 45px;
    width: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: blueviolet;
    margin-left: -22.5px;/*center balls*/
}

.timelineActivityLeader .timeline-content{
    margin-right: 15px;
}

.timeline-object.complete.end::after{
    content: '';
    width: 4px;
    height: 10px;
    background-color: blueviolet;
    top: 50px;
    position: absolute;
    grid-column: auto;
}

a #fleche_haut{
 width: 8%;
 height: auto;
}

footer{
    background-color: #000000;
    color: #757575;
}
footer p{
    font-size: small;
    margin-left: 2%;
}
#basdepage{
    color: cyan;
}