@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300&family=Titillium+Web:wght@400;600&display=swap');

/* === variables === */
:root{
    --div_color :#FEFBE9;
    --text_color: #111111;
}

[data-theme="dark"] {
    --div_color :#111111;
    --text_color: #FEFBE9;
}

[color-pop="noColor"]{
    --element_color:rgba(255, 255, 255, 0);
}

[color-pop="orange"]{
    --element_color:#F76B15;
}

[color-pop="purple"]{
    --element_color:#8E4EC6;
}

[color-pop="blue"]{
    --element_color:#3E63DD;
}

/* === globals === */

body{
    background-color: var(--div_color);
    color: var(--text_color);
    caret-color: transparent;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 1.2em;
}

h1{
    font-family: titillium web, sans-serif;
    font-size:4em;
    font-weight: bolder;
}

h2{
    font-family: titillium web, sans-serif;
    font-size:3em;
    font-weight: bolder;
}

h3{
    font-family: Titillium Web , sans-serif;
    color:var(--text_color);
}

section{
    background-color:var(--div_color) ;
    height: 100vh;
    background-color: var(--div_color);
    margin-bottom: 3em;
    padding: 6em;
    border-top-left-radius: 5000px 50px;
    border-top-right-radius: 5000px 10px;
    border-top-width: 2px ;
    border-top-style: solid;   
    
}

.hidden{
    visibility: hidden;
}



/* === scroll bar === */
::-webkit-scrollbar {
    width: 0.8em;
    background-color: var(--div_color);
}
::-webkit-scrollbar-thumb {
    background: var(--text_color);
    border-radius: 3px;
}


/* === top_bar === */
#top_bar{
    position:fixed;
    height: 5em;
    top:0;
    z-index:100;
    background-color: var(--div_color);
}

/* trad button (toggle switch) */
.container_trad {
    margin: auto;
    display: flex;
}

.toggle {
    width:1.5em;
    height: 3.5em;
    background-color: var(--div_color);
    border-radius: 1.7rem;
    padding: .25em 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: background-color 300ms 300ms;
}

.toggle__circle {
    width: 1.25em;
    height: 1.25em;
    background-color: var(--text_color);
    border-radius: 50%;
    margin-top: calc(3.5em - (.25em * 2) - 1em);
    transition: margin 500ms ease-in-out;
}

.toggle-text {
    line-height: 1;
    
}

.toggle-text p{
    font-weight: bold;
    color : var(--text_color)
}

#check:checked + .toggle > .toggle__circle {
    margin-top: 0;
}

#check:checked + .toggle {
    background-color: var(--element_color);
}

.effects_buttons{
    display: flex;   
    fill: var(--text_color);
}

#logo_perso{
    fill: var(--text_color)
}

#color_mode_div{
    height:2em;
    width: 2em;
}

.color_splashes{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index:101;
    top:0;
    left:4%;
}

.splash{
    height:0.4em;
    width: auto;
    overflow: visible;
    cursor:pointer;
}
.orange{
    fill:#F76B15;
    position: relative;
    left:11%;
    bottom:11%;
}
.purple{
    fill:#8E4EC6;
    position: relative; 
    left:4.5%;
    top:-25%;
}
.blue{
    fill:#3E63DD;
    position: relative;  
    left: -3%;
    bottom:12%;
}

.unset{
    fill:var(--div_color);
    position: relative;  
    left: 5%;
    bottom:60%;
}

/* === social media === */

#social_media{
    position: fixed;
    z-index:1000;
    top:45%;
    left:1em;
}

#social_media svg{
    fill: var(--text_color);
    width:5em;
    height:5em;
}

#github{
    position: relative;
}

#github::after, #linkedin::after{
    content:"";
    position: absolute;
    bottom: 2em;
    right: 3em;
    width: 50%;
    height: 5px;
    box-shadow: 10px 18px 10px var(--element_color);
    rotate: 15deg;
}


/* === home === */

#hero_image{
    position: relative;
    max-height: 75vh;
    max-width: 100%;
    width: auto;
    filter: drop-shadow(-10px -10px 15px var(--element_color));
}

#home p{
    font-family: Montserrat, serif;
    position: relative;
}

#statut:before{
    position: absolute;
    content: "";
    height: 0.2em;
    width: 1.5em;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #30A46C 100%);
    left:-2rem;
    top:48%;
}

#statut:after{
    position: absolute;
    content: "";
    height: 0.2em;
    width: 1.5em;
    background: linear-gradient(90deg, #30A46C 0%, rgba(255,255,255,0) 100%);
    right:-2rem;
    top:48%;
}

#statut_precision{
    height: 8em;
    border-radius: 500px 15px 350px 15px/15px 350px 10px 350px;
    border:solid 2px var(--text_color);
    box-shadow: 10px 20px 30px -26px var(--element_color);
}

/* === about === */
#avatar{
    max-height: 50vh;
    max-width: 100%;
    width: auto;
    transform: scaleX(-1);
    filter: drop-shadow(15px 15px 15px var(--element_color));
}


button {
cursor: pointer;
position: relative;
padding: 10px 24px;
font-size: 18px;
color: var(--text_color);
border: 1px solid var(--text_color);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
box-shadow: 10px 20px 50px -20px hsla(var(--text_color),0.8);
background-color: transparent;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
overflow: hidden;
}

button::before {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 50px;
height: 50px;
border-radius: inherit;
scale: 0;
z-index: -1;
background-color: var(--text_color);
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

button:hover::before {
scale: 4;
}

button:hover {
color: var(--div_color);
scale: 1.1;
box-shadow: 0 0px 20px var(--div_color);
}

button:active {
scale: 1;
}

#about a{
    text-decoration: none;
}


/* === skills === */
.card_wrapper{
    height: 85%;
    position:relative;
    margin-top: 2em;

}

.skills_card{
    height: 90%;
    width: 90%;
    padding: 1em;
    background-color: var(--div_color);
    overflow-y: hidden;
    position: absolute;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color:  var(--text_color);
    border-radius: 5px 15px 500px 5px/5px 3px 15px 5px;
    box-shadow: 12px 20px 15px -20px var(--text_color);
        
    
}

#skills h3{
    margin-bottom: 1em;
}

.previous svg, .next svg{
    fill: var(--text_color);
    height: 5em;
    width: 2em;
}

.skills_card p{
    color:var(--text_color);

}

.skills_card svg{
    fill:var(--text_color);
    height: 4em;
}

.skills_card .php_svg, .skills_card .js_svg{
    height: 3em;
    width: 3em;
}

.card_1{
    top:0;
}
.card_content a{
    color:var(--text_color)
}

.card_img img{
    width: 100%;
    border-radius: 5px;
}

.card_2{
    top:2%;
}

.card_3{
    top:4%;
}

.card_4{
    top:6%;
}
.card_5{
    top:8%;
}
.card_6{
    top:10%;
}


/* === contact === */


#contact a{
    color: var(--text_color)
}

#contact a:visited{
    color: var(--text_color)
}

.contact_links{
    position: relative;
}

#contact svg{
    position: absolute;
    left :-8em;
    top:1em;
    rotate:-20deg;
    width: 10em;
    height: 5em;
    fill:var(--text_color);
    stroke: var(--text_color);
}

footer {
    border-top-left-radius: 5000px 50px;
    border-top-right-radius: 5000px 10px;
    
    font-size: 12px;
    border-top-width: 2px ;
    border-top-style: solid;    
}



/* === media queries === */

/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 321px) { 
    #contact svg{
        position: absolute;
        left :-4em;
        top:10em;
        rotate:90deg;
        width: 5em;
        height: 3em;
        fill:var(--text_color);
        stroke: var(--text_color);
        transform:scaleX(-1)
    }
}
@media (max-width: 576px) { 
    #contact svg{
        position: absolute;
        left :-4em;
        top:0em;
        rotate:90deg;
        width: 5em;
        height: 3em;
        fill:var(--text_color);
        stroke: var(--text_color);
        transform:scaleX(-1)
    }
    #social_media{
        position: fixed;
        z-index:1000;
        top:45%;
        left:0em;
    }

    #social_media svg{
        fill: var(--text_color);
        width:3em;
        height:3em;
    }


} 

/* // media queries */
@media (min-width: 576px) { 
    #contact svg{
        position: absolute;
        left :-5em;
        top:1em;
        rotate:-5deg;
        width: 5em;
        height: 3em;
        fill:var(--text_color);
        stroke: var(--text_color);
    }
}


@media (max-width: 768px) {
    #social_media svg{
        fill: var(--text_color);
        width:3em;
        height:3em;
        margin: 1em 0;
    }
    body{
        font-size: 12px;
    }
    
}

@media (max-width: 320px){
    #statut_precision p{
        font-size: 10px;
    }
}

@media (min-width: 769px) and( max-width:1024px)  {
    #statut_precision p{
        font-size: 12px;
    }
}