.moi{
    padding-top: 59px;
    background-color: white;
    grid-area: moi;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 60px 95px auto auto;
    gap: 0;
    grid-auto-flow: row;
    justify-content: space-around;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
    "tittle"
    "presen"
    "curri_vitae"
    "lang";
}
.moi .tittle{
    grid-area: tittle;
}
/*---------------------------------------------------------------*/

.presentation{
    grid-area: presen;
    height: auto;
}
.presentation p{
    width: 95%;
    text-align: justify;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
}
/*---------------------------------------------------------------*/

.curri_vitae{
    grid-area: curri_vitae;
    display: flex;
    gap: 2%;
    justify-content: space-around;
    padding: 0 2.5% 0 2.5%;
}
/*------------------------------------*/
.photo{
    width: 250px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 375px auto auto;
    gap: 0.5em;
    grid-auto-flow: row;
    justify-content: space-around;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
    "imag"
    "down-1"
    "down-2";
}
.photo img{
    width: 250px;
    height: 375px;
    grid-area: imag;
}
.download-me{grid-area: down-1}
.download-notes{grid-area: down-2}
.download-me, .download-notes{
    text-align: center;
    height: 40px;
    width: 250px;
    border: 1px #000 solid;
    border-radius: 50px;
    font-size: 15px;
    background-color: #F0F0F0;
    transition-duration: 0.5s;
}
.download-me p, .download-notes p{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.download-me:hover, .download-notes:hover{
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.85);
    transition-duration: 0.5s;
}
/*------------------------------------*/
.mini_cv{
    grid-area: mini_cv;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 130px auto auto;
    gap: 0;
    grid-auto-flow: row;
    justify-content: flex-start;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
    "metier"
    "jsp"
    "caractere";
}
.metier{
    grid-area: metier;
}
.caractere{
    grid-area: caractere;
}
.caractere .titre{
    text-align: center;
    padding-bottom: 5px;
}
.mini_cv h2{
    padding-bottom: 10px;
    text-decoration: underline;
}
.mini_cv .metier p{
    text-align: justify;
    font-size: 22px;
}
/*------------------------------------*/
.jsp{
    grid-area: jsp;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    gap: 0;
    grid-auto-flow: row;
    justify-content: center;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
    "jsp1 jsp3"
    "jsp2 jsp4";
}
.jsp1{
    grid-area: jsp1;
    text-align: center;}
.jsp2{
    grid-area: jsp2;
    text-align: center;}
.jsp3{
    grid-area: jsp3;
    text-align: center;}
.jsp4{
    grid-area: jsp4;
    text-align: center;}
.jsp1 p, .jsp2 p, .jsp3 p, .jsp4 p{
    position: relative;
    top: 50%;
    transform: translateY(-50%);}
.jsp span{
    color: rgb(0, 130, 180);
    font-size: 22px;
}
/*------------------------------------*/
.caractere ul{
    display: flex;
    justify-content: space-around;
}
.cur-para, .pat-para, .ser-para, .cre-para{
    padding: 0 0 0 10px;
}
.caractere ul li p{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.caractere img{
    width: 50px;
}
.caractere li{
    display: flex;
}
/*---------------------------------------------------------------*/

.langage{
    grid-area: lang;
    padding: 0 2.5% 0 2.5%;
}
.langage h2{text-align: center;}
/*------------------------------------*/

.lang_info {
    display: grid;
    grid-template-columns: 49% 49%;
    grid-template-rows: auto auto auto;
    gap: 5px 2%;
    grid-auto-flow: row;
    justify-content: center;
    align-content: stretch;
    justify-items: flex-start;
    align-items: stretch;
    grid-template-areas:
    "html php"
    "css sql"
    "javas pyth";
}
.html{grid-area: html;}
.css{grid-area: css;}
.javas{grid-area: javas;}
.php{grid-area: php;}
.sql{grid-area: sql;}
.pyth{grid-area: pyth;}
/*------------------------------------*/

.html, .css, .javas, .php, .sql, .pyth{
    width: 100%;
    display: grid;
    grid-template-columns: 50px 92%;
    grid-template-rows: auto;
    gap: 0 2%;
    grid-auto-flow: row;
    justify-content: flex-start;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
    "lang-img lang-para"
    "lang-img progressbar-wrapper";
}
.lang-img{grid-area: lang-img;}
.lang-img img{
    width: 50px;
    height: 50px;
}
.lang-para{grid-area: lang-para;}
.progressbar-wrapper{grid-area: progressbar-wrapper;}

  .progressbar-wrapper {
    background-color: #dfe6e9;
    border-radius: 50px;
    width: 100%;
    height: 24.5px;
  }

.html .progressbar, .css .progressbar, .javas .progressbar,
.php .progressbar, .sql .progressbar, .pyth .progressbar{
    background-color: #00b894;
    text-align: right;
    font-size: 20px;
    border-radius: 15px;
}
.html .progressbar {width: 60%;}
.css .progressbar {width: 55%;}
.javas .progressbar {width: 2%;}
.php .progressbar {width: 40%;}
.sql .progressbar {width: 10%;}
.pyth .progressbar {width: 5%;}
.progressbar p{margin-right: 10px;}

.lang_other ul{
    display: flex;
    justify-content: center;
    gap: 0 20px;
}
.lang_other img{
    width: 50px;
    height: 50px;
}