/*  général 
______________*/
@import url('https://fonts.googleapis.com/css2?family=Syne&display=swap');

* {
    margin: 0;
    padding: 0;
}

h3 {
    font-family: 'Syne';
    font-size: 48px;
    font-weight: 600;
}

h2 {
    font-family: 'Syne';
    font-size: 48px;
    font-weight: 700;
    border-color: #101828;
    border-style: solid;
    border-width: 1px 0px;
    padding: 36px 0;
}

h4 {
    font-family: 'Syne';
    font-size: 32px;
    font-weight: 700;
    border-bottom: 1px solid #101828;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

h5 {
    font-size: 20px;
    font-weight: 400;
}

body {
    font-family: 'Syne', sans-serif;
    line-height: normal;
    color: #101828;
}

.bgColor {
    background-color: #FEF9F3;
}
.bgBlue {
    background-color: #E8FCFA;
}
.bgPink {
    background-color: #F7FDF3;
}


.fPink {
    color: #DE5FD3;
}
.fMiddleGreen {
    color: #299494;
}
.fPurple {
    color: #A960FF;
}
.fBlue {
    color: #6487FF;
}
.fDarkGreen {
    color: #156E79;
}

/* navbar
__________ */
header {
    font-family: 'Syne';
    font-size: 18px;
    font-weight: 700;
    position: sticky;
    top: 0;
}

.borderBottom {
    border-bottom: 1px solid #101828;
}

.nav-link {
    color: #101828;
}

.nav-link:hover {
    color: #299EAE;
}

.plantNav:hover {
    stroke: #000000;
    fill: #000000;
}

.navbar-toggler, .navbar-toggler:focus {
    border: none;
    box-shadow: none;
}



/* présentation
________________ */

h1 {
    font-weight: 700;
    font-size: 64px;
}


.blocMe{
    display: flex;
    align-items: center;
}

.iconMe i {
    font-size: 1.5em;
    transition: font-size 150ms ease-in-out 0s;
}
.iconMe a {
    cursor: pointer;
    text-decoration: none;
    color: #A960FF;
}

.blocIconsMe {
    display: flex;
}

.iconMe {
    width: 55px;
    height: 55px;
    display: flex;
    justify-content:center;
    align-items:center;
}

.iconMe a:hover {
    color: #DE5FD3;
    font-size: 1.7em;
}

.buttonPrim {
    background: #76fed9;
    border-color: #76fed9;
    border-style: solid;
    border-width: 1px;
    border-radius: 0;
    box-shadow: 4px 4px 0 0 rgba(16,24,40,1);
    font-family: 'Syne';
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 1px;
    color: #101828;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 28px;
}

.buttonPrim:hover {
    background: #FFFFFF;
    border-color: #101828;
    box-shadow: 4px 4px 0 0 rgba(16,24,40,1);
}

/* compétences
_______________ */

.blockSkills {
    padding: 0px 24px;
    border-left: 1px solid #101828;
}


/* expérience
_______________ */

.blocExp {
    background-color: #FFFDFA;
    border: 1px solid #101828;
    padding: 36px;
    display: flex;
    flex-flow: column;
    height: 100%;
    box-shadow: 4px 4px 0 0 rgba(16,24,40,1);
}

.dateExp {
    font-size: 24px;
    padding-bottom: 8px;
}

.dateExp span {
    font-size: 18px;
}

.compagnyExp {
    font-weight: 700;
    font-size: 32px;
    padding-bottom: 6px;
}
.compagnyDescription {
    font-weight: 300;
    font-size: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #101828;
}
.functionExp {
    font-size: 28px;
    font-weight: 700;
    padding: 24px 0 12px 0;
}
p {
    font-size: 16px;
}


/* formation
________________ */
.blocEduc {
    padding: 0px 24px;
    border-left: 1px solid #101828;
}
.degree {
    font-size: 20px;
    font-weight: 500;
}



/* à propos
____________ */

.blocAbout {
    background-color: #FFFDFA;
    border: 1px solid #101828;
    padding: 36px;
    display: flex;
    flex-flow: column;
    height: 100%;
    box-shadow: 4px 4px 0 0 rgba(16,24,40,1);
}

.blocAbout div {
    font-size: 18px;
    font-weight: 500;
}

/* footer
____________________ */
.footerContact {
    display: flex;
}

.borderTop {
    border-top: 1px solid #101828;
}

.viv {
    font-size: 28px;
    font-weight: 700;
    padding : 24px 0px;
    color: #101828;
}

.icons {
    font-size: 1.7em;
    display: flex;
    justify-content: flex-end;
    align-items: center;    

}

.icons>a {
    padding:0 20px;
}

footer a {
    cursor: pointer;
    text-decoration: none;
    color: #A960FF;
}
footer a:hover {
    color: #FC6DF0;
}




/* responsive 
_____________________________________________________________*/
@media screen and (min-width: 769px) {
    .navbar {
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    /* présentation et général*/
    h1 {
        font-size:36px;
    }
    h2 {
        font-size: 32px;
    }
    h3 {
        font-size: 32px;
    }
    h4 {
        font-size: 24px;
    }
    h5{
        font-size: 16px;
    }

    .imgMe {
        margin-top: 64px;
    }

    /* compétences */
    .blockSkills, .blocEduc {
        border-left: none;
        margin-top: 24px;
    }

    /* expérience */
    .blocExp, .blocAbout {
        padding: 16px;
    }

    .dateExp span {
        font-size: 14px;
    }

    .blocResp {
        margin-top: 36px;
    }

    .dateExp{
        font-size: 16px;
    }
    .compagnyExp {
        font-size: 24px;
    }
    .compagnyDescription {
        font-size: 14px;
    }
    .functionExp {
        font-size: 24px;
    }
    .missionsExp {
        font-size: 16px;
    }
    
    /* formation */
    .degree {
        font-size: 18px;
    }

    /* footer */
    .footerContact {
        flex-direction: column;
        justify-content:center;
        padding: 16px 10px;
    }
    .viv {
        font-size: 1.4em;
    }
    .contact {
        padding: 0 0 16px 10px;
    }
    .icons {
        /* font-size: 2em; */
        justify-content:space-around;
        padding-right: 5px;
    }

    .icons>a {
        padding: 0;
    }
}