body {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    background-color: rgb(0, 0, 0);
    background-image: url("pictures/Background-BinaireFD.jpg");
    background-attachment: fixed;
    background-size: cover;
}

header, footer {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(61,46,46,1) 0%, rgba(77,59,59,1) 20%, rgba(111,83,83,1) 35%, rgba(133,100,100,1) 50%, rgba(111,83,83,1) 65%, rgba(77,59,59,1) 80%, rgba(61,46,46,1) 100%);
}

section {
    margin: 0;
    padding: 20px;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
}

article {
    margin: 20px 5px 20px;
    padding: 5px;
    display: inline-block;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #000000;
}

/* -- CLASSES DE TEXTES ET TITRES --  */
h1 {
    color: white;
    font-size: 2.6rem;
    margin: 0;
}

h2 {
    margin: 0;
    padding: 3px;
    font-family: Arial Black;
    background: #F5ED08;
    background: linear-gradient(to bottom, #F5ED08 26%, #FFC505 43%, #DE1E09 87%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
    text-shadow: 2px 1px #000000 ;
    border: 1px solid black;
}

h3 {
    margin: 2px;
    font-size: 1.2rem;
    font-weight:900;
}

a {
    font-size: 1.2rem;
}

p {
    margin: 5px 10px 5px;
}

/* -- CLASSES DE TITRES (ENTRE SECTIONS) --  */
.sectionTitle {
    margin: 0;
    padding: 0;
    text-align: center;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(61,46,46,1) 0%, rgba(77,59,59,1) 20%, rgba(111,83,83,1) 35%, rgba(133,100,100,1) 50%, rgba(111,83,83,1) 65%, rgba(77,59,59,1) 80%, rgba(61,46,46,1) 100%);
}

.marginTitle {
    margin: 20px 0 5px;
}

/* ajustement mobile de la tailles des titres */
@media (max-width: 600px) {
    h2 {
        font-size: 2.1rem;;
    }
}


/* -- CLASSES DU HEADER --  */
.nameProfilContainer {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
}

@media (max-width: 700px) {
    .nameTitle {
        max-width: 95%;
    }
}


/* -- CLASSES DU SUB-HEADER --  */
.sub-header {
    width: 100%;
    display: inline-block;
    background-color: rgba(30, 25, 25, 0.96);
    padding-top: 10px;
    padding-bottom: 10px;
}

.titleAndPictureContainer {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-evenly;
}

.profilPictureContainer {
    max-width: 1980px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-evenly;
}
.profilPicture {
    width: 320px;
    height: auto;
    border-radius: 160px;
    border-style:double;
}

.profilTitle {
    max-width: 1440px;
}


/* -- CLASSES DU FOOTER --  */
.footerContainer {
    padding: 20px 10px 20px;
}


/* -- CLASSES DES SECTIONS --  */
.lightSectionBackground {
    background-color: rgba(148, 135, 135, 0.95);
}

.darkSectionBackground {
    background-color: rgba(0, 0, 0, 0.9);
}

.subSection {
    max-width: 1800px;
    margin: 0;
    padding: 0;
    width: 100%;
    height:auto;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-around;
}

.alternativSubSection {
    justify-content: center;
}

.biggestSubSection {
    max-width: 1640px;
    margin: 15px 25px 5px;
    padding: 0 30px 0;
    background-color: rgba(61,46,46,1);
    background-image: linear-gradient(to top, #3d2e2e, #493939, #544444, #615050, #6d5c5c);
    border-radius: 10px;
    box-shadow: 5px 5px 5px #000000;
    justify-content: space-evenly;
    align-items: center;
}


/* -- CLASSES D'ARTICLES' --  */
.littleArticle {
    max-width: 580px;
}

.mediumArticle, .mediumAlternativeArticle {
    max-width: 800px;
}

.bigArticle {
    max-width: 1400px;
    padding: 20px;
    border: 1px solid white;
}

.bigAlternativeArticle {
    max-width: 1600px;
}

.littleArticle, .mediumAlternativeArticle {
    background-color: rgb(230, 220, 220);
}

.mediumArticle, .bigArticle {
    background-color: rgba(61,46,46,1);
}

.mobileArticle {
    display: none;
}

.smallerArticle {
    max-width: 250px;
    box-shadow: 0 0 0 #000000;
}

.centerSubArticle, .leftSubArticle, .rightSubArticle, .singleSubArticle {
    box-shadow: 0 0 0 #000000;
}
.centerSubArticle {
    max-width: 580px;
}

.leftSubArticle, .rightSubArticle {
    max-width: 480px;
}

.singleSubArticle {
    max-width: 1600px;
}

.myProjectsArticle {
    background-color: rgba(61,46,46,1);
    max-with: 1920px;
}

/* -- CLASSES D'IMAGES --  */
.articlePicture {
    border-radius: 10px;
    width: 95%;
    height: auto;
}

.cvPicture {
    border-radius: 10px;
    max-width: 300px;
    height: auto;
}

/* -- CLASSES DE MISE EN PAGE --  */
.whiteText {
    color: white;
}

.blackText {
    color:black;
}

.beigeText {
    color: rgba(171, 157, 157, 1);
}

.smallerText {
    font-size: 14px;
}

.biggerText {
    font-size: 22px;
}

.leftTextAlign {
    text-align: left;
    margin: 10px;
}

.centerTextAlign {
    text-align: center;
}

.noTextDecoration {
    text-decoration: none;
    color: #000000;
    font-weight: 600;
    font-size: 22px;
}

.alternativeH3 {
    font-size: 1.3rem;
}

.alternativeTitle {
    font-size: 28px;
}

.contactButton {
    width: 300px;
    padding: 10px;
    background-color: rgb(228, 204, 198);
    color:#000000;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #000000;
}

.contactButton:hover {
    background-color: rgb(248, 240, 238);
    width: 304px;
}

.projectArticleText {
    text-align: left;
    margin: 2%;

}

/* -- AUTRES CLASSES DE STYLE --  */
.socialLogo {
    padding:1px 8px 1px;
    color: white;
    border-radius: 3px;
}

.linkedin {
    background-color: rgb(27, 122, 255);
}

.gitHub {
    background-color: rgb(0, 0, 0);
    border-radius: 14px;
}

.cvDL {
    background-color: rgb(2, 46, 2);
}

.legalMentions {
    color: rgb(223, 198, 167);
}
.legalMentions:hover {
    font-size: 1.2rem;
    color: rgb(238, 231, 222);
}


/* -- ADAPTATIONS RESPONSIVE DIVERSES --  */
@media (max-width: 1790px) {
    .bigArticle {
        margin: 0px;
    }
    .smallerArticle {
        max-width: 220px;
    }
}
@media (max-width: 1700px) {
    .mediumArticle, .mediumAlternativeArticle {
        max-width: 640px;
    }
    .bigArticle {
        margin: 0 30px 0;
    }
    .smallerArticle {
        display: none;
    }
    .biggestSubSection {
        max-width: 1380px;
    }
    .profilTitle {
        max-width: 960px;
    }
    .alternativeTitle {
        font-size: 24px;
    } 
}
@media (max-width: 1440px) {
    .biggestSubSection {
        max-width: 1230px;
    }
    .mediumArticle, .mediumAlternativeArticle {
        max-width: 580px;
    }
    .centerSubArticle {
        max-width: 400px;
    }
}
@media (max-width: 1240px) {
    .biggestSubSection {
        justify-content: space-between;
        margin: 15px 0 15px;
        padding: 0 20px 0;
    }
    .littleArticle {
        max-width: 480px;
    }
    .mediumArticle, .mediumAlternativeArticle {
        max-width: 1240px;
    }
    .centerSubArticle {
        max-width: 280px;
    }
    .profilTitle {
        max-width: 1200px;
    }
}
@media (max-width: 1080px) {
    section {
        padding: 0;
    }
    article {
        margin: 15px 0 15px;
    }
    .littleArticle {
        max-width: 460px;
    }
    .centerSubArticle {
        display: none;
    }
}
@media (max-width: 970px) {
    .littleArticle {
        max-width: 900px;
    }
}
@media (max-width: 780px) {
    .biggestSubSection {
        justify-content: center;
    }
    .bigArticle {
        margin: 0;
        padding: 10px 0 10px;
    }
    .desktopArticle {
        display: none;
    }
    .mobileArticle {
        display: inline-block;
        margin: 20px 0 20px;
    }
    .contactButton {
        width: 480px;
    }
    .contactButton:hover {
        width: 484px;
    }
    .projectArticleText {
        margin: 0;
    }
}
@media (max-width: 540px) {
    .leftTextAlign {
        margin: 0;
    }
    .contactButton {
        width: 360px;
    }
    .contactButton:hover {
        width: 364px;
    }
}
@media (max-width: 360px) {
    .contactButton {
        width: 300px;
    }
    .contactButton:hover {
        width: 304px;
    }
}