:root{
    font-size: 100%;
}

body{
    font-family: 'Montserrat', sans-serif;
    max-width: 100vw;
}

#main{
    width: 650px;
    height: 850px;
    display: flex;
    
    padding: 0.625rem 0.8125rem 0.625rem 0.875rem;
    box-sizing: border-box;
    background-image: linear-gradient(to bottom, #3f1fea, #0056fc, #0077ff, #0093fe, #00abf5, #00b5ef, #10bee6, #3ec5dc, #00c2c8, #00bea9, #00b782, #1eaf55);
}

#container-gauche{
    width: 296px;
    height: 830px;
    display: flex;
    flex-direction: column;
    background-color:rgba(196, 196, 196, 0.3);
    padding-left: 1.0625rem;
    padding-right: 1.125rem;
    box-sizing: border-box;
    border-radius: 0.625rem;
}

#fabien{
    display: flex;
    flex-direction: column;
    margin-top: 1.25rem;
}

#photo{
    margin-top: 20px;
    border-radius: 50%;
   
}

#profil{
    border-radius: 50%;
}

#prenom{
    width: 59px;
    height: 30px;
    font-style: normal;
    font-weight: 400;
    font-size: 1.5625rem;
    line-height: 1.875rem;
    color: #CECACA;
    margin-top: 10px;
    margin-left: 1.375rem;
    margin-bottom: 0;
}

#nom{
    font-weight: 500;
    font-size: 2.1875rem;
    line-height: 2.6875rem;
    color: #FFFFFF;
    margin-top: 5px;
    margin-left: 0.25rem;
    margin-bottom: 0;
}

#titre{
    font-style: normal;
    font-weight: 700;
    font-size: 8px;
    line-height: 14px;
    color: #160101;
    margin-top: 5px;
    margin-left: 1.375rem;
    margin-bottom: 0;
}

#tel{
    text-decoration: none;
    color: #ffff;
}

#presentation{
    display: flex;
   
}

.coordonnees{
    font-family: 'Oxygen', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.9375rem;
    margin-top:0;
    color: #FFFFFF;
    margin-left: 0.625rem; 
}



#email, #telephone, #adresse{
    height: 38px;
    display: flex;
    background: rgba(196, 196, 196, 0.35);
    border-radius: 0.625rem; 
    margin-top: 0.3125rem;
    padding-left: 0.9375rem;
}

#email, #telephone{
    padding-top: 1rem;
}

#email1, #telephone1, #adresse1{
    margin-top: 0.625rem;
}

.gauche{
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: #FFFFFF;
    margin-top: 0.375rem;
    margin-left: 1.3125rem;
    margin-bottom: 0;
}

#connaissances, #langages, #reseaux, #hobbies{
    background: rgba(196, 196, 196, 0.35);
    border-radius: 0.625rem;
    margin-top: 0.75rem;
}

.mot {
    font-size: 7px!important;
    margin: 0!important;
}

#anglais{
    font-family: 'Oxygen', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: #FAFAFA;
    margin: 0;
  
}

span, li{
    font-family: 'Oxygen', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #FAFAFA;
    margin: 0; 
}

#langue{
      font-family: 'Oxygen', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 8px;
    color: #FAFAFA;
    margin: 0; 
}


li > a{
    text-decoration: none;
    color: white;
}

li > a:hover{
    color: #1B24D2;
}

#passion{
    display: flex;
    margin-top: 0.8125rem;
    column-gap: 1.875rem;
}

.passion{
    font-style: normal;
    font-weight: 700;
    font-size: 0.625rem;
    line-height: 1.125rem;
    color: #E5E5E5; 
    margin-top: 0.1875rem;
}

#partie-1{
    margin-left: 4.375rem;
}

.voyage, .series, .gastronomie{
    margin-left: 0.375rem;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(14deg) brightness(101%) contrast(103%);
}

.actu{
    margin-left: 0.5625rem;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(14deg) brightness(101%) contrast(103%);
}

/*---------FIN---PARTIE--DROITE--------*/


/*-----------PARTIE---GAUCHE-------*/

#container-droit{
    background: #FFFFFF;
    border-radius: 0.625rem;
    width: 500px;
}

#experience, #education, #competences, #competences2, #contacter{
    width: 294px;
    height: 24px;
    color: #FFFFFF;
    border-radius: 0.3125rem;
    font-style: normal;
    font-weight: 600;
    font-size: 0.875rem!important;
    line-height: 1.125rem!important;
    text-align: center;
    margin-left: 0.875rem;
    box-sizing: border-box;
    padding-top: 0.1875rem;
    justify-content: center;
}

#experience{
        background-color: #1B24D2 ;
}

#education{
        background-color: #329EC7;
}

#competences{
        background-color: #26CBD9;
         margin-top: 0px;
}

#competences2{
     background-color: #29E6B0  ;
     margin-top: 1.875rem;
}

h3{
    font-family: 'Oxygen', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: #343434;
    margin-top: 0.75rem;
    margin-left: 0.875rem;
    margin-bottom: 0;  
}

h4, h5{
    font-family: 'Oxygen', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.5625rem;
    line-height: 1.125rem;
    color: #73808D;
    margin-left: 0.875rem;
    margin-top: 0;
    margin-bottom: 0;
}

.droit{
    font-family: 'Oxygen', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.5625rem;
    line-height: 0.875rem;
    margin-left: 0.875rem;
    margin-top: 0;
    color: #000000;
}

.poste{
    font-family: 'Oxygen', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: #343434;
    margin-top:0.125rem;
}

#logo-haut, #logo-bas{
    display: flex;
    column-gap: 0.9375rem;
    margin-left: 14px;
}

#logo-bas{
    margin-top: 0.9375rem;
}

#logo-en-cours{
    display: flex;
    column-gap: 1.5625rem;
    margin-left: 2.5rem;
}
 
/*-----------FIN------PARTIE--DROITE-------*/

/*---------PROGRESS-BAR---------------------*/

.progress{
    width: 80%;
    height: 12px;
    background-color: #FFFFFF;
    border-radius: 10px;
}

.progress .progress-bar{
    width: 0%;
    height: 100%;
    opacity: 0;
    background-color: #0056fc;
    border-radius: 0.625rem;
    position: relative;
    transition: all .5s;
   
}

.progress-bar span{
    position: absolute;
    top: 0;
    right: 0;
    color: #ffffff;
}

#container{
    padding-left: 1.375rem;
}



/*--------- CIRCULAR-PROGRESS-BAR--------*/





#figma{
    position: 0;
}

.circle{
    position: relative;
    top: 0px;
    left: 0px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.circle1{
    position: relative;
    top: 0px;
    left: 0px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    
}

.circle2, .circle3, .circle4, .circle5, .circle6, .circle7, .circle8, .circle9, .circle10, .circle11, .circle12, .circle13, .circle14{
    position: relative;
    top: 0px;
    left: 0px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
   
}





#figma, #html, #javascript, #git, #github, #webpack, #wordpress, #canva, #sql, #mysql, #php, #symfony, #docker, #mongo, #sec {
    position: absolute;
    
}


#html, #css, #webpack{
    border-radius: 50%;
}

#css{
    filter: grayscale(100%);
    position: absolute;
}

#cloud{
    border:#000000 2px solid;
    border-radius: 50%;
}

#contacter{
    display: flex;
    width: 294px;
    height: 22px;
    color: #FFFFFF;
    border-radius: 0.3125rem;
    font-style: normal;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.125rem;
    text-align: center;
    margin-left: 0.875rem;
    margin-top: 0px;
    box-sizing: border-box;
    padding-top: 0.1875rem;
    background-color: #24e67e
}

/*-----------Impression et ¨PDF-----------*/

#impression{  
    border: #00b782;
    border-radius: 0.625rem;
    margin-top: 0px;
    margin-left: 100+px;
    color: #ffff;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 14px;
    cursor: pointer;  
    position: absolute;
    top: 0px;
    left: 60px;
}

#footer{
    display: flex;
    flex-direction: column;
}

#telecharger{
    width: auto;
    height: auto;
    border: #00b782;
    color: #ffffff;
    margin-top: 0px;
    margin-left: 75px;
    border-radius: 0.625rem;
    text-decoration: none;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 14px;
}


#print{
    display: none;

}

/*--------------- BOUTON SHARE ----------*/

.main_box{
    width: 30px;
    height: 30px;
    position: relative;
}
 
#share_button{
    display: none;
}
 
.sharebtn,a{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
 
.sharebtn{
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    position: absolute;
    top: 10px;
    left: 250px;
    transform: translate(-50%,-50%);
    color: #333;
    font-size: 2em;
    z-index: 1;
    cursor: pointer;
    border-radius: 30%; 
}
 
.sm_list{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    left: 250px;
    transform: translate(-50%,-50%);
}



 
.sm_list a{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    left: 250px;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    transition: all .3s;
    font-size: 1.5em;
}
 
#share_button:checked ~ .sm_list a:nth-child(1){
    background-color: #3B5998;
    transition-delay: 0.2s;
    transform: translateX(-2em);
}
 
#share_button:checked ~ .sm_list a:nth-child(2){
    background-color: #dd2553;
    transition-delay: 0.2s;
    transform: translateX(2em);
}
 
#share_button:checked ~ .sm_list a:nth-child(3){
    background-color: #000f94;
    transition-delay: 0.3s;
    transform: translateX(4em);
}
 
#share_button:checked ~ .sm_list a:nth-child(4){
    background-color: #1077ec;
    transition-delay: 0.3s;
    transform: translateX(-4em);
}
 
#share_button:checked ~ .sm_list a:nth-child(5){
    background-color: rgb(10, 63, 0);
    transition-delay: 0.4s;
    transform: translateX(6em);
}
 
#share_button:checked ~ .sm_list a:nth-child(6){
    background: linear-gradient(70deg,blue,green,red,yellow);
    transition-delay: 0.4s;
    transform: translateX(-6em);
}
 
/* Hovering Effects */
#share_button:checked ~ .sm_list a:nth-child(1):hover{
    background-color: #ffffff;
    color: #3B5998;
    /* transition-delay: 0.2s;
    transform: translateX(-6em); */
}
 
#share_button:checked ~ .sm_list a:nth-child(2):hover{
    color: #dd2553;
    background-color: #fff;
}
 
#share_button:checked ~ .sm_list a:nth-child(3):hover{
    color: #000f94;
    background-color: #fff;
}
 
#share_button:checked ~ .sm_list a:nth-child(4):hover{
    color: #1077ec;
    background-color: #fff;
}
 
#share_button:checked ~ .sm_list a:nth-child(5):hover{
    color: rgb(10, 63, 0);
    background-color: #fff;
}
 
#share_button:checked ~ .sm_list a:nth-child(6):hover{
    color: black;
    background-image: linear-gradient(90deg,white,grey);
}
 
span:visited{
    background-color: #000f94;
}

#impression{
    margin-top: 45px;
}

#portfolio-fabien{
    text-decoration: none;
    color:#000000;
    font-size: 12px;
    width: 320px;
    margin-top: 33px;
    font-weight: 700;
}


/*-------------------------------------------------*/

@media print{
    body{
        background-image: linear-gradient(to bottom, #3f1fea, #0056fc, #0077ff, #0093fe, #00abf5, #00b5ef, #10bee6, #3ec5dc, #00c2c8, #00bea9, #00b782, #1eaf55);
    }
}


@media screen and (max-width: 570px){
    

    #main{
        display: flex;
        flex-direction: column;
        background-image: linear-gradient(to bottom, #3f1fea, #0056fc, #0077ff, #0093fe, #00abf5, #00b5ef, #10bee6, #3ec5dc, #00c2c8, #00bea9, #00b782, #1eaf55);
        width: auto;
        height: auto;
    }

    #container-gauche{
        width: auto;
        height: auto;
    }

    #container-droit{
        width: auto;
        height: auto;
    }

    #experience, #education, #competences, #competences2, #contacter{
        margin-left: 5px;
    }
}