@font-face{
    font-family:'Montserrat-Regular.ttf' ;
    src : url('../fonts/Montserrat-Regular.ttf') format('truetype');
    
}
* {
    box-sizing: border-box;
    margin:0;
    padding:0;
    /* border: green 1px solid; */
}
html {
    font-size: 62.5%;
    background-color: #dadada;
}
:root {
    /* fonts */
    --font-family-title: 'Nunito', sans-serif;
    --font-family-subtitle:'Josefin Sans', sans-serif;
    --font-family-text: "Montserrat", sans-serif;
    /* font-size */
    --font-size-title: 2rem;
    --font-size-subtitle: 1.8rem;
    --font-size-text: 1.4rem;
    /* font-weight */
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold:900;
   /* borders */
   --borderAuto1: chartreuse solid 2px;
   /* --borderAuto2: #eb008a solid 1px; */
   /* text color */
   /* --text-color: rgb(105, 0, 105); */
   --text-color: #4f4f4f;
   --white: #fff;
   --myfunnypink:#eb008a;
}

body{
    min-width: 375px;
    max-width:767px ;
    margin: 0 auto;
    font-family: var(--font-family-text);
    font-size: var(--font-size-text);
    overflow-x:hidden;
}

h1,h2,h3,h4,h5{
    font-family:var(--font-family-title);
    color:var(--text-color);
    font-weight: var(--extrabold);
    letter-spacing: 0.25rem;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.navigation li a{
    color: white;
    font-weight: bold;
}
img{
    width: 100%;
    height: auto;
}

/* xxxxxxxxxx HEADER - HEADER xxxxxxxxx */
header{
    height: 30%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    background:linear-gradient(45deg,#ffd0dbdc, #fa819edc);
}
div.intro{
    width: 35%;
    height: 55%;
    margin: 2.5% auto;
    background-size: cover;
}
.intro img{
    border-radius:50%; 
}
ul.for_desktop{
    visibility: hidden;
    height: 0;
}

/* xxxxxxxxxx MAIN - MAIN xxxxxxxxxx */
main{
    margin: 0 auto;
    background-color: #fff;
    padding-bottom: 1px;
}
main section{
    width: 95%;
    margin: 0 auto;
}
main section > h2{
    padding: 5%; 
    text-transform: uppercase;
    font-family: var(--font-family-subtitle);
}

/* °°°°°°° SECTION.APROPOS °°°°°°°° */
div.portrait-presentation{
    width: 95%;
    border-radius: 8px;
    padding: 3% 7%;
    margin: 0 auto;
    font-family: var(--font-family-text);
    font-weight:var(--medium);
    color: var(--text-color);
    line-height: 2.5rem;
    letter-spacing: 0.01rem;
    text-align: justify;
    background: rgba(235, 0, 137, 0.056);
}
div.portrait-presentation:hover{
    border:none;
    box-shadow:0px 2px 7.5px hsl(325, 100%, 46%, 0.55);
    transition: 0.9s;
    transform: scale(1.085);
}
div.portrait{
    width: 45%;
    height: 55%;
    border-radius: 0 30% 0 30%; 
    margin: 0 auto;
    margin-bottom: 10%;
    background-size: cover;
}
div.portrait img{
   border-radius: 30% 0 30% 0;
 }
 div.portrait img:hover{
    transition: 5s;
   transform: scaleY(1) rotate(-360deg);
  }
div.presentation span{
    font-weight: var(--bold);
    text-transform: uppercase;
}
div.presentation ul{
    margin: 3.5% 5%;
    line-height: 1.3rem;
}
div.presentation ul li{
    margin-bottom: 2.55%;
}
div.presentation ul li > span{
    padding-left: 10%;
}
div.presentation p br{
    margin-bottom: 2.55%;
}
.apropos a{
    color:var(--myfunnypink);
    font-weight: 600;
}

/* -----div.experiencePro-------------- */
h3.subtitle{
    text-align: left;
    padding: 5%; 
    text-transform: uppercase;
}
div.experiences {
    display: grid;
    grid-template-columns: repeat(4, 100%);
    grid-gap: 3%;
    overflow-x: scroll;
    position:relative;
}
div.experiences a{
    color: var(--text-color);
}
div.experiences .item1,
div.experiences .item2,
div.experiences .item3,
div.experiences .item4{
    width: 95%;
    background:linear-gradient(-135deg, rgb(248, 218, 217, 0.35), rgba(255, 208, 219, 0.763));
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}
div.experiences .item1{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
div.experiences > div > h4{
    padding:15% 0;
    font-size: 1.8rem;
}
/* ARROW */
div.arrow {
    position: absolute;
    top: 53%;
    left: 87%; 
}
div.arrow span {
    display: flex;
    flex-direction: column;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--text-color);
    border-right: 2px solid var(--text-color);
    font-weight: var(--bold);
    transform: rotate(-45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
div.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){   
    animation-delay: -0.4s;
} 
@keyframes animate{
    0%{
        opacity: 0;
        transform: rotate(-45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(-45deg) translate(20px,20px);
    }
}

/* °°°°°°° SECTION.STACK °°°°°°° */
section.projet>div:not(div:first-child){
    box-shadow: 1px  1px 5px rgba(235, 0, 138, 0.25);
    margin: 6.5% auto;
    height: auto;
    border-radius: 8px;
    overflow: hidden;   
}
.certificatIntegratrice{
    margin-bottom: 6.5%;
}

figure.projets{
    display: block;
    text-align: center;
}
div.flexbox-grid:hover,
div.certificatIntegratrice:hover{
    border:rgb(235, 0, 138, 0.8) groove 2px;
    box-shadow: 1px  1px 5px rgba(235, 0, 138, 0.25);
    color: var(--white);
    box-shadow:10px 20px 10px rgba(235, 0, 138, 0.25);
    overflow-x: auto;
    transition: all 0.3s ease;
}
div.flexbox-grid figcaption:hover,
.certificatIntegratrice figcaption:hover{
    color:var(--white);
    font-weight: var(--extrabold);
    background-color: #ff0095;
}

.projet>div>figure>figcaption,
.flexbox-grid figure figcaption,
.certificatIntegratrice figcaption{
    background:linear-gradient(-135deg, rgb(248, 218, 217, 1),
    rgba(255, 208, 219, 0.763));
    color: var(--text-color);
    font-size: 1.9rem;
    font-weight: 600;
    padding: 2.5% 0;
    text-align: center;
}
/* ------------------------------------------------ */
.flexbox-grid:hover,
.certificatIntegratrice:hover {
    font-weight: 900;
    animation: bounce 0.500s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes bounce {
   0% {
        transform: translateY(-3.5px);
    }
   100% {
        transform: translateY(7.5px);
    }
}

/* -- xxxxxxxxxx FOOTER  xxxxxxxxxxx  */
footer{
    height: 30%;
}
nav.down-menu{
    width: 100%;
    padding: 2.5% 3.5%;
    margin: 0 auto;
    background:linear-gradient(-90deg,#ffd0dbdc, #fa819edc);
    font-weight: 900 ;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
}
.item4-nav{
    width: 48px;
    height: 52px;
}
.hamburger{
   width: 13.5%;
   height:22%;
}
.hamburger>span{
    border : #f4f4f4 2px solid;
    border-radius: 100%;
    margin-bottom: 15%;
    display: block;
    line-height: 50%;
    height: 50%;
}
div.copyright{
    background-color: ;
    width: 100%;
    margin: 0 auto;
    color:#fff;
    font-weight: 700 ;
   
}
.copyright ul{
    width: 100%;
    background:linear-gradient(-90deg,#ffd0dbdc, #fa819edc);
    display: flex;
    justify-content: center;
}
.copyright ul li{
    margin-right: 20px;
}