/*Affichage sur téléphone*/
@media (max-width: 1000px){

body {
    background-image: url('../images/image_fond1.jpg');
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    padding-top: 3rem;
}
}

strong{
    font-weight: 600;
}

.container{
    opacity: 1;
    background-color: #f0efec;
    width : 90%;
    margin: 2rem auto;
    padding: 1rem;
    border-radius: 15px;
    box-sizing: border-box;
}


/*==========================

Style du header

==========================*/

header {
    margin-bottom: 1.5rem;
    text-align: center;
}

header .photo_profil{
    margin: 2rem 0;
}

.photo_profil .profil{
    border-radius: 120px;
    border: 8px #D2651F solid;
    box-shadow: 20px -8px rgba(39,131,139,0.5);
    width: 15rem;
}

header .presentation{
    text-align: center;
}

h1{
    font-size:2.5rem;
    font-weight: 600;
    color:#D2651F;
}

h2{
    font-weight: 600;
    font-size: 1.8rem;
}

/*==========================

Style du main

==========================*/

h3{
    border-bottom: 2px #D98637 solid;
    color:#D2651F;
    padding-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

h4{
    font-weight: 600;
}

h5{
    font-size:1.3rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px black solid;
    margin: 0 5rem 0 5rem;
    padding: 0.2em;
}

aside{
    font-style: italic;
    color: #27838B;
}

/*==========================

Style partie competences

==========================*/

.competences{
    display:flex;
    justify-content: space-around;
}

.picto{
    width: 3rem;
}

.dvlp{
    width: 18%;
    margin:3% 3% 5% 0;
    text-align: center;
}

.librairie{
    margin:3% 3% 5% 0;
    text-align: center;
}

.outils{
    margin:3% 3% 5% 0;
    text-align: center;
}

.carto{
    margin:3% 3% 5% 0;
    text-align: center;
}

.edition{
    margin:3% 3% 5% 0;
    text-align: center;
}

/*==========================

Style hobbies

==========================*/

.hobbie{
    display:flex;
    justify-content: space-between;
}

.picto_sec{
    width: 2rem;
    height: 2rem;
}


/*==========================

Style Contactez-moi

==========================*/
.contact{
    border-bottom: 1px black dashed;
    padding: 0.5rem 0 0.5rem 0;
}

.a_propos{
    padding: 0.5rem 0 0.5rem 0;
}

.contact_info{
    display:flex;
    justify-content: space-between;
}

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



/*=================================================================================================


Affichage sur tablette ou petit écran ordinateur*/
@media (min-width: 750px) and (max-width: 1000px){

    header .presentation{
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .media_tablette{
        display: flex;
    }

    .competences_container{
        width: 50%;
        border-right: 1px black dashed;
        padding-right: 1rem;
    }

    .soft_hobbies_container{
        width: 50%;
        padding-left: 1rem;
    }
}




/*=================================================================================================


Affichage sur ordinateur */
@media (min-width: 1000px){

    body {
        background-color: #355F75;
        font-family: 'Barlow', sans-serif;
        font-size: 1rem;
    }

    .first_container{
        background-image: url('../images/image_fond1.jpg');
        width: 1200px;
        margin: 2rem auto;
        padding: 1.5rem 1.5rem 1.5rem 1.5rem;
        border-radius: 15px;
    }

    .container{
        background-color: #f0efec;
        width : 1000px;
        margin: 2rem auto;
        padding: 3rem 1.5rem 3rem 1.5rem;
        border-radius: 15px;
        box-sizing: border-box;
    }

    /*==========================

    Style du header

    ==========================*/

    header {
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: 1rem;
    }

    header .photo_profil{
        width: 30%;
    }

    .photo_profil .profil{
        border-radius: 120px;
        border: 8px #D2651F solid;
        box-shadow: 20px -8px rgba(39,131,139,0.5);
    }

    header .presentation{
        text-align: center;
        width: 70%;
    }

    h1{
        font-size:4rem;
        font-weight: 600;
        color:#D2651F;
    }

    h2{
        font-weight: 600;
    }

    /*==========================

    Style du main

    ==========================*/

    main {
        display:flex;
        flex-wrap: nowrap;
        box-sizing: border-box;
    }

    main .left{
        width: 40%;
        padding: 0 2rem;
        border-right: 1px black solid;
        margin-right: 0.1rem;
    }

    main .right{
        width: 60%;
        padding: 0 2rem;
        border-left: 1px black solid;
        margin-left: 0.1rem;
    }

    h3{
        border-bottom: 2px #D98637 solid;
        color:#D2651F;
        padding-bottom: 1rem;
        font-size: 2rem;
        font-weight: 600;
    }

    h4{
        font-weight: 600;
    }

    h5{
        font-size:1.4rem;
        font-weight: 600;
        text-align: center;
        border-bottom: 1px black solid;
        margin: 0 5rem 0 5rem;
        padding: 0.2em;
    }

    aside{
        font-style: italic;
        color: #27838B;
    }

    /*==========================

    Style partie competences

    ==========================*/

    .competences{
        display:flex;
        justify-content: space-around;
    }

    .picto{
        width: 3rem;
    }

    .dvlp{
        width: 18%;
        margin:3% 3% 5% 0;
        text-align: center;
    }

    .librairie{
        margin:3% 3% 5% 0;
        text-align: center;
    }

    .outils{
        margin:3% 3% 5% 0;
        text-align: center;
    }

    .carto{
        margin:3% 3% 5% 0;
        text-align: center;
    }

    .edition{
        margin:3% 3% 5% 0;
        text-align: center;
    }

    /*==========================

    Style hobbies

    ==========================*/

    .hobbie{
        display:flex;
        justify-content: space-between;
    }

    .picto_sec{
        width: 2rem;
        height: 2rem;
    }


    /*==========================

    Style Contactez-moi

    ==========================*/
    .contact{
        border-bottom: 1px black dashed;
        padding: 0.5rem 0 0.5rem 0;
    }

    .a_propos{
        padding: 0.5rem 0 0.5rem 0;
    }

    .contact_info{
        display:flex;
        justify-content: space-between;
    }

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

}