*,::after,::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    letter-spacing: 2px;
}

p,h3,h5,li{
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  */
}

body::-webkit-scrollbar {
    width: 10px;
    position: relative; 
    right: 20px;
    background-color: rgb(255, 255, 255);
}
  
body::-webkit-scrollbar-thumb {
background-color: rgb(179, 179, 194);
border-radius: 20px; 
border: 3px solid rgb(255, 255, 255); 

}

section{
    padding-block: 40px;
}

p{
    font-size: 1.5em;
}

h2{
    margin-bottom: 40px !important;
}

#presentation{
    margin-top: 60px;
}

.ProjetOrganisation{
    display: flex;
}

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

.travailPdf a{
    width: 200px;
    height: 200px;
    background-color: #e33100;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: beige;
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);

}

.travailPdf a i{
    font-size: 2.5em;
}

.iomeem{
    height: auto;
    background-color: #003C57;
    padding: 5%;
    min-height: 50vh;
}

.iomeem h3{
    text-align: center;
    font-size: 2.9em;
    color: #e5e3e2;
}

.iomeemCompetence{
    display: flex;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding-block: 50px;
}

.iomeemCompetence div{
    width: 400px;
    height: 300px;
    padding: 2%;
    background-color: #0088A5;
    border-radius: 25px;
    margin-block: 20px;
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);

}

.iomeemCompetence div h5{
    color: #57C400;
    font-size: 1.5em;
}



.iomeemCompetence ul{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.iomeemCompetence li{
    text-align: center;
    margin-block: 10px;
    font-size: 1.3em;
    /* letter-spacing: 2px; */
}

.presentationLogoResume{
    display: flex;
    justify-content: space-evenly;
    padding-block: 85px;
    align-items: center;
}

.MainPresentation{
    background-color:#0088A5;
    padding: 0% 2% 10% 2%;
    border-bottom: solid;
    border-bottom-width: 20px;
    border-color: #EFF1F3;
}

.MainPresentation p{
    font-size: 1.5em;
    /* letter-spacing: 2px; */
}

.MainPresentation h3{
    font-size: 1.9em;
    margin-block: 20px;
}

#lesBases{
    flex-direction: column;
    align-items: center;
    background: rgb(17,100,242);
    background: linear-gradient(139deg, rgb(210, 45, 0) 0%, rgb(255, 102, 102) 20%, rgb(255, 91, 91) 75%, rgb(209, 45, 0) 100%);
    padding: 20px;
    width: auto;
    height: auto;
}

.html-content{
    background: url(../img/banner3.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 30vh;
    margin: 80px;
    border-radius: 6px;
}

.html-content img{
    width: 25%;
    min-width: 300px;
    height: 100%;
    border-radius: 6px;
}


.resume{
    width: 50%;
}

.contexte{
    margin-inline: 3%;
}

.Objectif{
    margin-inline: 3%;
}

.TravailEffectuer{
    background-color: #CDE6F5;
    min-height: 100vh;
    padding: 10% 2% 10% 2%;
}

.TravailEffectuer h3{
    font-size: 1.9em;
    margin-block: 20px;
}

.TravailChoix{
    margin-bottom: 30px;
}

.DocumentUtiliser{
    padding: 5% 2% 10% 2%;
}

.DocumentUtiliser h3{
    font-size: 1.9em;
    margin-block: 20px;
}

.imgDotnet{
    width: auto;
    height: 200px;
}

.imgProjet{
    max-width: 100%;
}

.mainDotnet{
    padding-inline: 5%;
    padding-top: 100px;
    background-color: #003C57;
    color: white;
}

.lesCompetences{
    height: auto;
    margin-block: 20px;
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
}

.uneCompetence{
    width: 100%;
    height: auto;
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
    background-color: azure;
    margin-block: 20px;
    display: flex;
    align-items: center;
    padding-left: 15px;
}

.IconCompetence{
    display: flex;
    height: 70%;
    justify-content: center;
    align-items: center;
}

.IconCompetence img{
    width: 75px;
    height: 75px;
}

.NomCompetence{
    display: block;
    padding: 5%;
    color: black;
    font-size: 1em;
}

.mainDotnet .imgInfo{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    BACKGROUND-COLOR: #233f57;
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
    border-radius: 20px;
    padding: 30px;
}

.LaDescription a{
    color: rgb(175 175 175);
}

.InfoProjet{
    padding-inline: 30px;
}

.lesImagesProjet{
    display: flex;
    overflow-x: scroll;
}

.lesImagesProjet img{
    height: 500px;
    width: auto;
    margin-inline: 15px;
}

.lesImagesProjet::-webkit-scrollbar {
    width: 10px;
    position: relative; 
    background-color: rgb(255 255 255 / 37%);
    
}
  
.lesImagesProjet::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    transition: all ease-in 2.4s;
}

.lesImagesProjet::-webkit-scrollbar-thumb:hover{
    background-color: rgba(255, 255, 255, 0.733);
    
}

.lesImagesProjet::-webkit-scrollbar-thumb:active{
    background-color: rgb(255, 255, 255);
}

.lesImgSections{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.lesImgSections img{
    width: auto;
    height: 300px;
}

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

@media(width < 800px){
    .presentationLogoResume{
        flex-direction: column;
    }

    .imgDotnet{
        width: auto;
        height: 150px;
    }

    .presentationLogoResume img{
        margin-block: 20px;
        width: 300px;
    }

    .resume{
        width: 90%;
    }

    .ProjetOrganisation{
        flex-direction: column;
    }

    .MainPresentation{
        padding: 10% 0;
    }
}

@media(width < 500px){
    .imgDotnet{
        width: auto;
        height: 100px;
    }
}