/**
 * @author Benjamin Peronne
 * @email contact@benjaminperonne.fr
 * @create date 2020-11-07 23:22:23
 * @modify date 2020-11-07 23:22:23
 * @desc [CV_Projet]
 */

 /* ======================================= */
 /* bootsrap */
 /* Expérience.html et Formation.html */
 /* ======================================= */

 @media screen and (max-width: 800px)
 {
    #flex
    {
        display: flex;
        flex-direction: column !important;
    }    

    .container
    {
        width: 100% !important;
    }
 }


.container
{
    width: 50%;
    border-radius: 50%;
}

.card-img-top
{
    border-radius: 0%;
}

#flex
{
    display: flex;
    justify-content: space-around;

    margin-top: 10em;
}
/* ======================================= */
/* bootsrap */
/* Expérience.html et Formation.html */
 /* ======================================= END*/


html
{
  width:100%;
  height:100%;
}
body
{
    margin:auto;
    width:100%;
    height:100%; 
}

header, article, footer 
{
    background-color: #ebebeb;
    margin-top: 1em;
    border-radius: 0.4em;
}

a, main h1 {
    color: purple;
    text-decoration: none;
}

.cv_main > header > section:nth-child(2) > div
{
    margin-top: -5%;
}

.cv_main > header > section:nth-child(2) > div > p
{
    line-height: 5%;
}

h4 
{
    font-size: 2em;
}

/* regle CSS générique */

/* ======================================================================= */
/* ======================= Responsive Design Begin ======================= */
/* ======================================================================= */

@media screen and (max-width: 1920px)
{
    .cv_main > header > section:nth-child(1) > div > p 
    {
        margin-left: -1.8em !important;
        margin-top: 8%;
        font-size: 1.7em;
    }

    .cv_main > header > section:nth-child(1) > div > img
    {
        margin-top: 15%;
        width: 50%;
        height: 50%;
    }
    .cv_main > header > section:nth-child(2) > div > h4 
    {
        font-size: 2em;
    }

    .cv_main > header > section:nth-child(2) > div > p
    {
        font-size: 1em;
        line-height: 0.5em;

    }

    h2
    {
     margin-left: 2% ;
    }
}

@media screen and (max-width: 1375px)
{
    .cv_main > header > section:nth-child(1) > div > p
    {
        font-size: 1.4em !important;
        margin-top: 0.1em;
        margin-left: -1.9em !important;
    }

    .cv_main>header>section:nth-child(2)>div>h4 
    {
        font-size: 1.5em;
    }

    h2 
    {
        margin-left: 2%;
    }
}

@media screen and (max-width: 1366px) 
{
    .cv_main > header > section:nth-child(1) > div > p 
    {
        margin-left: -1.9em !important;
        font-size: 1em;
        margin-top: 0.1em;
    }

    .cv_main > header > section:nth-child(2) > div > h4 
    {
        font-size: 1.7em;
    }

    h2 
    {
        margin-left: 2%;
    }

}


@media screen and (max-width: 1077px)
{
    /* header img 
    {
        width: 60% !important;
    } */

    .cv_main > header > section:nth-child(1) > div > p
     {
        margin-left: -1.4em !important;
        font-size: 0.9em !important;
        margin-top: 0.1em;
    }
}

@media screen and (max-width: 950px)
{
    .cv_main > header > section:nth-child(2) > div > p
     {
        font-size: 0.9em;
        line-height: 0.5em;
        margin-top: 1em !important;
    }
}


@media screen and (max-width: 720px)
{
    .cv_main > header > section:nth-child(2)
    {
        margin-left: 2em;
    }
}


@media screen and (max-width: 800px)
{
    .cv_main > header > section:nth-child(1) > div > p 
    {
        margin-left: -20% !important;
        font-size: 0.9em !important;
    }

    .cv_main > header > section:nth-child(1) > div > img 
    {
        width: 60% !important;
        height: 60% !important;
        margin-left: 0.3em;
        margin-top: 15% !important;
    }

    .cv_main > header > section:nth-child(2) > div > h4
    {
        font-size: 1.5em;
    }

    .cv_main > header > section:nth-child(2) > div > p
    {
        font-size: 0.8em;
    
    }

}

@media screen and (max-width: 600px)
{
    .cv_main > header > section:nth-child(2) > div > h4 
    {
        font-size: 1.2em;
    }

    .cv_main > header > section:nth-child(2)> div > p 
    {
        font-size: 0.7em;
        line-height: normal;

    }

    .cv_main > header > section:nth-child(1) > div > img 
    {
        width: 100% !important;
        margin-left: -1.5em !important;
    }

    .cv_main > header > section:nth-child(1) > div > p 
    {
        margin-left: -3em !important;
        font-size: 0.7em;
        word-break: break-all;
    }

    #list
    {
        margin-left: -3em !important;
        
    }

    #progress
    {
        line-height: 1.4em;
    }


}

@media screen and (max-width: 414px)
{
    main
    {
        display: flex;
        flex-direction: column;
           
    }


    .cv_main > header > section:nth-child(1) > div > p
     {
        margin-left: -3em !important;
        font-size: 0.1em !important;
    }

    .cv_main > header > section:nth-child(1) > div >img {
        width: 100% !important;
        margin-left: -1.2em !important;
    }

    .cv_main > header > section:nth-child(2) > div > h4 {
        font-size: 0.84em;
    }

    .cv_main > header > section:nth-child(2) > div > p {
        font-size: 0.6em;
        line-height: normal;

    }

    main p
    {
        font-size: small;
    }

    #left
    {
        margin-right: 0em !important;
    }

    main:nth-child(2) > section:nth-child(2) > article:nth-child(2) > div:nth-child(2) > div:nth-child(1) > div
    {
        margin-left: -0.5em !important;
    }

    main:nth-child(2) > section:nth-child(2) > article:nth-child(2) > div:nth-child(2) > div:nth-child(1) > h3
    {
        margin-left: -0.5em;
    }

    main:nth-child(2)>section:nth-child(2)>article:nth-child(2)>div:nth-child(3)>div:nth-child(1)>div 
    {
        margin-left: -0.5em !important;
    }

    main:nth-child(2) > section:nth-child(2) > article:nth-child(2) > div:nth-child(3) > div:nth-child(1) > h3 
    {
        margin-left: -0.5em;
    }

    main:nth-child(2) > section:nth-child(2) > article:nth-child(2) > div:nth-child(4) > div:nth-child(1) > div 
    {
        margin-left: -0.5em !important;
    }
 
    main:nth-child(2) > section:nth-child(2) > article:nth-child(2) > div:nth-child(4) > div:nth-child(1) > h3 
    {
        margin-left: -0.5em;
    }
    
    main:nth-child(2) > section:nth-child(2)
    {
        margin-left: -0.01em !important;
    }

}

@media print
{

    

    main > section:nth-child(1) > article:nth-child(3) {
        display: none;
    }

    header, article,footer {
        background-color: none !important;
    }

   .cv_main > header > section:nth-child(2) > div > h4 
   {
       font-size: 1.2em;
        display: f;
   }

   .cv_main > header > section:nth-child(2) > div > p 
    {
       font-size: 0.7em;
       line-height: normal;

   }

   .cv_main > header > section:nth-child(1) > div > img 
   {
       /* width: 100% !important;
       margin-left: -1.5em !important; */
       display: none;
   }

   .cv_main > header > section:nth-child(1) > div > p 
   {
       margin-left: -1.8em !important;
       font-size: 0.9em;
       word-break: break-all;
   }

   #list 
   {
       margin-left: -3.3em !important;
       font-size: 0.7em; 
       line-height: 1.65em;
   }

   #progress 
   {
       line-height: 1em;
   }


.cv_main 
{
    margin: 0em 5% !important;
}

}

/* ======================================================================= */
/* ======================= Responsive Design End =========================*/
/* ======================================================================= */

.cv_main 
{
    margin: 0em 15%;
}

/* ======================================================================= */
/* ===========================  Begin Header ============================= */
/* ======================================================================= */

img 
{
    border-radius: 50%;
}

header 
{
    height: 25vh;
    display: flex;
}

header section:nth-child(1) 
{
    flex: 2;
}

header section:nth-child(1) div 
{
    margin-left: 60%;
    transform: translateX(-50%);
}

header section:nth-child(2) 
{
    flex: 3;
}

header section:nth-child(2) h1 
{
    margin-bottom: 1.5em;
}

header section 
{
    margin: auto;
}

header img 
{
    width: 6em;
}
/* ======================================================================= */
/* ============================  Header End ============================== */
/* ======================================================================= */


/* ======================================================================= */
/* ==========================  Compétence Begin ========================== */
/* ======================================================================= */

main 
{
    display: flex;
}

#left 
{
    flex: 1;
    margin-right: 0.5em;
}

#right 
{
    flex: 1;
    margin-left: 0.5em;
}

article 
{
    padding: 1em;
}

#competence 
{
    display: flex;
    width: 100%;
    margin-top: 1.5em;
}

#competence li 
{
    list-style: none;
    margin-top: 0.2em;
}

#list
{
    flex: 3;
}

#progress 
{
    flex: 7;
}

progress 
{
    -webkit-appearance: none;
    width: 90%;
}

progress::-webkit-progress-bar 
{
    border-radius: 0.2em;
    background-color: white;
}

progress::-webkit-progress-value 
{
    border-radius: 0.2em;
    background-color: #a7376b;
}

/* ======================================================================= */
/* ==========================  Compétence End ============================ */
/* ======================================================================= */


/* ======================================================================= */
/* =========================  Formation Begin ============================ */
/* ======================================================================= */

#formation 
{
    display: flex;
    margin-top: 1.5em;
    margin-right: 1em;
}


#formation #left 
{
    flex: 1;
    margin-left: 10%;
    
}

#formation #right 
{
    flex: 5;
    margin-left: 10%;
}

/* ======================================================================= */
/* ==========================  Formation End ============================= */
/* ======================================================================= */


/* ======================================================================= */
/* =========================  Experience Begin =========================== */
/* ======================================================================= */

#experience 
{
    display: flex;
    margin-top: 1.5em;
    margin-right: 1em;
}

#experience img 
{
    margin-top: -10%;
    width: 4em;
    margin-left: -20%;
}

#experience #left 
{
    flex: 1;
    margin-left: 10%;
}

#experience #center 
{
    flex: 3;
}

#experience #right 
{
    flex: 1;
    margin-left: 10%;
}

/* ======================================================================= */
/* ==========================  Experience End ============================ */
/* ======================================================================= */


/* ======================================================================= */
/* =========================  Plus d'info Begin ========================== */
/* ======================================================================= */


h2 
{
    font-size: 1.15em;
    margin-top: 1.5em;
    color: palevioletred;
    width: 50%;
    padding-left: 0.4em;
    border-left: 0.15em dashed black;
    border-bottom: 0.15em dashed black;
}

h3 
{
    font-size: 1.1em;
    opacity: 0.5;
}

video 
{
    width: 100%;
    border-radius: 0.4em;
    margin-top: 1em;
}

audio 
{
    width: 100%;
    margin-top: 1em;
}


#contact 
{
    display: flex;
}

#icon 
{
    font-size: 2em;
    margin: 0.5em;
    margin-left: auto;
    margin-right: auto; 
}

/* ======================================================================= */
/* =========================  Plus d'info End ============================ */
/* ======================================================================= */

footer 
{
    padding: 0.5em;
    text-align: center;
    margin-bottom: 1em;
}