@charset "utf-8";

/*-----------------------global-----------------------*/

* {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color : black;
}

::selection {
  background-color: #9866C7;
  color: white;           
}

/*
body {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
*/

/*-----------------------main-----------------------*/

main section {
    border-top : solid black 2px;
    scroll-margin-top: 5.3rem;
}

main h1 {
    padding-bottom: 0.5rem;
}

main section {
    padding : 2rem;
}

main li {
    padding : 0.25rem;
    list-style-type: none;
}

/*-----------------------cartes projets-----------------------*/

aside {
    border-top: solid 2px black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #9866C7;
    color: white;
}

aside * {
    padding : 0.5rem;
}

.liste_projets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.liste_projets .carte_projet {
    width: 300px;
    height: auto;
    margin: 5px;

    color: black;
    background-color: white;

    font-family: sans-serif;

    border-radius: 2px;
    border : solid 2px black;
}

.liste_projets .carte_projet h3 {
    border-top : solid 2px black;
}

.liste_projets .carte_projet * {
    padding : 10px;
    margin : 0px;
}

.liste_projets .carte_projet p {
    padding : 4px 10px 4px 10px;
    margin : 0px;
}

.liste_projets .carte_projet .tags {
    display: flex;
    flex-wrap: wrap;
    padding: 3px 7px 3px 7px;
}

.liste_projets .carte_projet .tags p {
    padding: 1px 10px 1px 10px;
    margin: 2px;

    border-radius: 10px;

    border: solid 2px black;

    /*color: white;*/
    /*background-color: #9866C7;*/
}

.liste_projets .carte_projet a {
    text-decoration: underline;
    color: #9866C7;
}

.liste_projets .carte_projet img {
    width: 300px;
    height: 180px;
    padding: 0px;
    object-fit: cover;
    display: block;
}

/*-----------------------cartes certifications-----------------------*/

.mes_certifications {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.mes_certifications .carte_certif {
    width: 300px;
    height: 300px;
    margin: 5px;

    color: black;
    background-color: white;

    font-family: sans-serif;

    border-radius: 2px;
    border : solid 2px black;
}

.mes_certifications .carte_certif h3 {
    border-top : solid 2px black;
}

.mes_certifications .carte_certif * {
    padding : 10px;
    margin : 0px;
}

.mes_certifications .carte_certif p {
    padding : 4px 10px 4px 10px;
    margin : 0px;
}

.mes_certifications .carte_certif .tags {
    display: flex;
    flex-wrap: wrap;
    padding: 3px 7px 3px 7px;
}

.mes_certifications .carte_certif .tags p {
    padding: 1px 10px 1px 10px;
    margin: 2px;

    border-radius: 10px;

    border: solid 2px black;

    /*color: white;*/
    /*background-color: #9866C7;*/
}

.mes_certifications .carte_certif a {
    text-decoration: underline;
    color: #9866C7;
}

.mes_certifications  .carte_certif img {
    width: 300px;
    height: 180px;
    padding: 0px;
    object-fit: cover;
    display: block;
}

/*-----------------------cartes competences-----------------------*/

.mes_competences {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.titre_competences {
    border-top : solid 2px #9866C7;
    margin-top: 10px;
    padding-top: 5px;
}

.mes_competences .carte_competences {
    width: 300px;
    height: auto;
    margin: 5px;

    padding-bottom: 10px;

    color: black;
    background-color: white;

    font-family: sans-serif;

    border-radius: 2px;
    border : solid 2px black;
}

.mes_competences .carte_competences h3 {
    border-top : solid 2px black;
}

.mes_competences .carte_competences * {
    padding : 10px;
    margin : 0px;
}

.mes_competences .carte_competences p {
    padding : 4px 10px 4px 10px;
    margin : 0px;
}

.mes_competences .carte_competences .tags {
    display: flex;
    flex-wrap: wrap;
    padding: 3px 7px 3px 7px;
}

.mes_competences .carte_competences .tags p {
    padding: 1px 10px 1px 10px;
    margin: 2px;

    border-radius: 10px;

    border: solid 2px black;

    /*color: white;*/
    /*background-color: #9866C7;*/
}

.mes_competences .carte_competences a {
    text-decoration: underline;
    color: #9866C7;
}

.mes_competences  .carte_competences img {
    width: 300px;
    height: 180px;
    padding: 0px;
    object-fit: cover;
    display: block;
}