:root{
    /* ----------------------------------- MARGINS ---------------------------------- */
    --mb-1: 0.5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
    --mb-5: 2.5rem;

    /* ------------------------------------ COLORS --------------------------------- */

    --color-purple: #735CFF;
    --text-color: white;
    --sub-color: #868686;
    --color-dark: rgb(19, 19, 19);

    /* ------------------------------------ FONTS --------------------------------- */

    --font-poppins: 'Poppins', sans-serif;
    --font-bold: 600;
    --font-semibold: 500;
    --font-normal: normal;

    --font-biggest: 3rem;
    --font-bigger: 2rem;
    --font-big: 1.5rem;
    --font-sizenormal: 1rem;
    --font-small: .9rem;
    --font-smaller: .8rem;
    --font-smallest: .7rem;

    --z-indexmax: 999;
}
/* --------------------------------- MOBILE --------------------------------- */
@media screen and (min-width: 320px) and (max-width: 599px){
    .btn{
        height: 40px;
    }
    .project_infos{
        flex-direction: column;
        align-items: flex-start;
    }
    .p-sub{
        text-align: left;
        padding-top: var(--mb-2);
    }
    .submit_btn{
        font-size: var(--font-smaller);
    }
}
@media screen and (min-width: 360px){
    .main_title{
        font-size: 1.25rem;
        text-align: center;
    }    
}

@media screen and (min-width: 375px){
    .profile, .profile_pic{
        margin-bottom: var(--mb-4);
    }
    .main_title{
        font-size: var(--font-big);
    }
    .cd_img{
        width: 75%;
    }
    .profile_pic{
        height: 275px;
    }
    /* .container.contact_container, .container.about_container, .container.project_container{
        min-height: initial;
    } */
}
/* @media screen and (max-width: 414px){
    .container{
        justify-content: flex-start;
        padding-top: 4rem;
    }
} */
/* --------------------------------- TABLETS -------------------------------- */
@media screen and (min-width: 600px){
    header{
       /* margin-bottom: var(--mb-5); */
       padding: 1.5rem;
    }
    .logo-mobile{
        display: none;
    }
    .logo-desk{
        display: block;
        width: 80%;
    }
    /* .logo{
        width: 20%;
    } */
    .menu_line{
        width: 25px;
        height: 3px;
    }
    /* .container{
        padding-top: 70px;
    } */
    .wrapper{
        padding: var(--mb-3);
    }
    .title_wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .title_wrap{
        justify-content: flex-start;
    }
    .main_title{
        text-align: left;
        margin-right: 1rem;
    }
    .main_title_2{
        margin-right: 0;
    }
    .main_img_rectangle, .main_img_circle{
        display: block;
    }
    .main_img_rectangle{
        width: 145px;
        height: 50px;
        margin-left: 0;
    }
    .main_img_circle{
        width: 55px;
        height: 55px;
        margin-right: var(--mb-3);
    }

    .cd_img{
        width: 55%;
        margin-bottom: var(--mb-5);
    }
    .circle{
        width: 65px;
        height: 65px;
    }
    .icon{
        font-size: 4rem;
    }
    .music_player{
        margin-bottom: var(--mb-5);
    }
    .music_title{
        font-size: 1.4rem;
    }
    .btn{
        font-size: 1.25rem;
    }
/* ---------------------------------- about --------------------------------- */
    .container.contact_container, .container.about_container, .container.project_container, .container.services_container{
        min-height: 100%;
    }
    .profile_pic{
        width: 67%;
    }
    .about_text{
        font-size: 1.2rem;
    }
    .main_text, .text_outline {
        font-size: 1.8rem;
    }
/* -------------------------------- services -------------------------------- */
    .service_title{
        font-size: var(--font-big);
    }
    .subtitle{
        font-size: var(--font-sizenormal);
    }
    .card{
        margin-bottom: 3.5rem;
    }
    .service_item{
        font-size: var(--font-sizenormal);
    }
    .card_sub{
        font-size: var(--font-smaller);
    }
    .btn.info_btn{
        font-size: var(--font-sizenormal);
    }
/* -------------------------------- projects -------------------------------- */
    .projects_wrapper{
        margin-bottom: var(--mb-5);
    }
    .project_infos{
        flex-direction: column;
        align-items: flex-start;
    }
    .p-sub{
        text-align: left;
        padding-top: var(--mb-2);
    }
}

@media screen and (min-width: 768px){
    .main_title{
        font-size: 2rem;
    }
    .cd_img{
        width: 45%;
    }
    .main_text, .text_outline{
        font-size: var(--font-bigger);
    }
/* -------------------------------- services -------------------------------- */
    .services_wrapper{
        display: flex;
        width: 100%;
    }
    .card{
        flex-basis: calc(100%/3);
        padding: 0 1rem;
    }
    .card_top{
        min-height: 177px;
    }
    .service_list{
        min-height: 95px;
    }
    .subtitle, .service_item{
        font-size: var(--font-smaller);
    }
    .btn.info_btn{
        padding: .3rem 1rem;
        font-size: var(--font-smaller);
    }
/* --------------------------------- contact -------------------------------- */
    .contact_form{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    input{
        flex-basis: 48%;
    }
    input.btn.submit_btn{
        flex-basis: 30%;
    }
    textarea{
        margin-bottom: var(--mb-5);
    }
}
/* -------------------------------- DESKTOPS -------------------------------- */
@media screen and (min-width: 1024px){
/* ----------------------------------- nav ---------------------------------- */
    header{
        padding: 1.5rem;
    }
    .header_content{
        width: 100%;
    }
    .menu{
        display: none;
    }
    nav{
        position: relative;
    }
    .nav_list{
        opacity: 1;
        visibility: visible;
        flex-direction: row;
        background-color: transparent;
        justify-content: flex-end;
        height: auto;
        left: initial;
        right: initial;
        bottom: initial;
        position: relative;
        backdrop-filter: initial;
    }
    
    .menu_item{
        margin: 0;
    }
    .menu_link{
        text-transform: initial;
        font-size: var(--font-sizenormal);
        transition: all .5s ease-out;
        padding: 0;
        margin: 0 var(--mb-3);
    }
    .menu_link:hover{
        color: var(--color-purple);
    }
    .menu_link::after{
        width: 0;
    }
    .menu_active::before{
        content: "";
        display: none;
    }
    .menu_active{
        color: var(--color-purple);
    }
    .sub_body{
        min-height: 100%;
    }
    header{
        /* padding: 2rem 10%; */
        margin-bottom: 0;
        position: fixed;
        width: 100%;
    }
    .header_content{
        width: 100%;
    }
    .container.home_container{
        min-height: 100%;
        max-height: 100%;
        scroll-snap-align: start;
        /* padding-top: 50px; */
    }
/* ---------------------------------- home ---------------------------------- */
    .container{
        align-items: center;
        justify-content: center;
    }
    .home_container{
        flex-direction: row;
        align-items: center;
    }
    .title_wrapper{
        margin-bottom: 0;
        align-items: flex-start;
        justify-content: flex-start;
        line-height: 2;
    }
    .main_title{
        font-size: 1.59rem;
        margin-right: 0;
    }
    .container_second:first-child{
        flex-basis: 60%;
    }
    .container_second:last-child{
        flex-basis: 40%;
    }
    .main_img_circle{
        margin-right: var(--mb-2);
        width: 65px;
        height: 65px;
    }
    .main_img_rectangle{
        margin-left: var(--mb-1);
    }
    .cd_img{
        width: 80%;
    }
    .section_title{
        font-size: var(--font-big);
        margin-bottom: var(--mb-5);
    }
/* ---------------------------------- about --------------------------------- */
    .about_wrap{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .profile, .main_text{
        flex-basis: 50%;
    }
    .profile{
        padding-top: .5rem;
    }
    .profile_pic{
        width: 90%;
        height: 365px;
    }
    .about_wrap .main_text{
        align-self: flex-start;
    }


    .project_infos{
        flex-direction: row;
        align-items: center;
    }
    .p-sub{
        padding-top: 0;
        font-size: .78rem;
    }
/* --------------------------------- contact -------------------------------- */
    input, textarea{
        margin-bottom: 4rem;
    }
    input.btn.submit_btn {
        flex-basis: 20%;
    }
}

@media screen and (min-width: 1280px){
    header{
        padding: 1.5rem 5rem;
    }
    .container{
        padding: 0 5rem;
    }
    .container.home_container{
        min-height: calc(100% + 91.2px);
    }
    .wrapper.title_wrapper{
        padding: 0;
    }
    .main_title{
        font-size: var(--font-bigger);
    }
    .profile{
        margin-bottom: 0;
    }
/* -------------------------------- services -------------------------------- */
    .subtitle, .service_item{
        font-size: var(--font-sizenormal);
    }
    .wrapper.service_title_wrap{
        padding: 0 0 4rem 0;
    }
    .card{
        padding: 0;
        margin: 0 1rem 0 0;
    }
    .btn.info_btn{
        font-size: var(--font-small);
    }
/* -------------------------------- projects -------------------------------- */
    .wrapper{
        padding: 0;
    }
    .projects_wrapper{
        justify-content: space-between;
    }
    .cards{
        width: 280px;
    }
    .project_infos{
        flex-direction: row;
        /* align-items: flex-start; */
    }
    .p-sub{
        padding-top: 0;
        font-size: var(--font-small);
    }
    
/* --------------------------------- contact -------------------------------- */
    .wrapper.wrapper_contact{
        width: 75%;
        align-self: flex-start;
    }
}

@media screen and (min-width: 1600px){
    .main_title{
        font-size: 2.5rem;
    }
    .cd_img{
        width: 70%;
    }
    .about_wrap{
        align-items: flex-start;
    }
    .about_wrap .main_text {
        flex-basis: 80%;
    }
    .profile_pic{
        margin-top: .5rem;
        height: 470px;
        width: 65%;
    }
    .wrapper.wrapper_contact {
        width: 65%;
    }
    .wrapper.service_title_wrap {
        width: 70%;
        align-self: flex-start;
    }
    .main_text, .text_outline{
        font-size: var(--font-biggest);
    }
    .cards{
        width: 270px;
    }
    .drag-icon{
        display: none;
    }
}

@media screen and (min-width: 1920px){
    
    .container{
        padding: 0 10%;
        margin-bottom: 0;
        /* padding-top: 0; */
    }
    .container.home_container{
        padding-top: 0;
    }
    .card{
        margin: 0 5rem 0 0;
    }
    body{
        height: initial;
        scroll-snap-type: y mandatory;
        overflow: scroll;
    }
    .sub_body{
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        overflow: scroll;
        height: initial;
    }
    .container{
        height: 100vh;
    }
    .wrapper.wrapper_project, .projects_wrapper{
        height: initial;
    }
}