/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/

body{

    background: linear-gradient(324deg, #000000 0%, #242424 100%);

}

.topbar{

    background: rgba(0, 0, 0, 0.438);
    backdrop-filter: blur(10px);

}

.projects_topzone{

    position: fixed;
    width: 100%;
    height: 70px;
    background: linear-gradient(324deg, #141414 0%, #2d2d2d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgb(255 255 255 / 28%);
    box-shadow: 0px 8px 15px 0px rgb(0 0 0 / 39%);
    z-index: 5;

}

.topzone_cathegoryfiltersbutton{

    display: none;
    --cthfilterbtnsize: 50px;
    position: absolute;
    left: calc((70px - var(--cthfilterbtnsize))/2);
    top: 50%;
    transform: translateY(-50%);
    width: var(--cthfilterbtnsize);
    height: var(--cthfilterbtnsize);
    border: 2px solid rgb(255 255 255 / 24%);
    border-radius: var(--cthfilterbtnsize);
    background-color: #ffffff1c;
    background-image: url("../imgs/icons/filter.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(var(--cthfilterbtnsize)/1.5);
    padding: 0px;
    cursor: pointer;
    transition: 0.2s;

}

.topzone_cathegoryfiltersbutton:hover{

    background-color: #0000005e;
    background-image: url("../imgs/icons/filter.svg");
    border: 2px solid rgba(255, 255, 255, 0.507);

}

.topzone_cathegoryfiltersbutton:focus{

    opacity: 0.4;

}

.projects_topzone span{

    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: bold;

}

.projects_bottomzone{

    display: flex;
    flex-direction: row;
    margin-top: 70px;

}

/* -------------------------------------- CATHEGORIES -------------------------------------- */

.cathegorybar{

    position: relative;
    z-index: 3;
    width: 400px;
    height: auto;
    background: linear-gradient(324deg, #0f0f0f 0%, #292929 100%);
    border-right: 1px solid rgb(255 255 255 / 5%);
    overflow: hidden;
    text-align: center;
    /*box-shadow: 0px 8px 15px 0px rgb(0,0,0,0.25);*/

}

.cathegory_closeresponsive{

    display: none;
    --cath_closresponsive_buttonsize: 74px;
    --cath_closresponsive_buttonmargin: 10px;
    position: absolute;
    top: var(--cath_closresponsive_buttonmargin);
    right: var(--cath_closresponsive_buttonmargin);
    width: calc(var(--cath_closresponsive_buttonsize) - var(--cath_closresponsive_buttonmargin)*2);
    height: calc(var(--cath_closresponsive_buttonsize) - var(--cath_closresponsive_buttonmargin)*2);
    /*outline: none;*/
    border: 2px solid #ffffff36;
    border-radius: calc(var(--cath_closresponsive_buttonsize));
    /*background-color: #00000038;*/
    background-color: #181818;
    background-image: url("../imgs/icons/close_thin.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(var(--cath_closresponsive_buttonsize)/1.5 - var(--cath_closresponsive_buttonmargin));
    transition: 0.2s;
    cursor: pointer;
    z-index: 12;

}

.cathegory_closeresponsive:hover{

    background-color: #101010;
    /*background-color: #0000007a;*/
    background-image: url("../imgs/icons/close_thin.svg");

}

.cathegory_closeresponsive:focus{

    background-color: #0a0a0a;
    /*background-color: #0000009d;*/
    background-image: url("../imgs/icons/close_thin.svg");

}

.cathegory_topdarkenedresponsive{

    display: none;
    top: 0px;
    left: 0px;
    position: absolute;
    height: 74px;
    width: 100%;
    /*background: #00000091;*/
    background: linear-gradient(324deg, #080808 0%, #181818 100%);
    pointer-events: none;
    user-select: none;
    z-index: 11;
    box-shadow: 0 0 20px 0px rgb(0 0 0 / 38%);
    border-bottom: 1px solid #ffffff36;

}

@keyframes cathegoryremove_anim {

    from {opacity: 0; transform: scale(0);}
    to {opacity: 1; transform: scale(1);}

}

.cathegory_removefilter{

    display: none;
    width: calc(100% - 40px);
    height: 50px;
    margin-top: 20px;
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: transparent;
    /*outline: none;*/
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-content: center;
    animation-name: cathegoryremove_anim;
    animation-duration: 0.2s;
    animation-timing-function: cubic-bezier(0.4, 0.05, 0.46, 1.4);

}

.cathegory_removefilter img{

    aspect-ratio: 1 / 1;
    width: 30px;
    transition: 0.2s;
    margin-right: 5px;

}

.cathegory_removefilter:hover{

    background: white;
    color: black;
    border: 2px solid transparent;

}

.cathegory_removefilter:hover img{

    filter: invert(1);

}

.cathegory_title{

    width: calc(100% - 20px);
    font-size: 22px;
    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ffffff36;
    text-align: left;

}

.cathegory_buttons{

    margin: 20px;

}

.cathegory_button{

    /*--cathegorybutton_bg: #373737;*/
    /*--cathegorybutton_bg: linear-gradient(324deg, #292929 0%, #4b4b4b 100%);*/
    --cathegorybutton_bg: linear-gradient(324deg, #292929 0%, #454545 100%);
    width: 100%;
    height: 50px;
    border: 0px solid transparent;
    /*outline: 0px solid transparent;*/
    border-radius: 50px;
    /*border-radius: 20px;*/
    margin-bottom: 15px;
    background: var(--cathegorybutton_bg);
    cursor: pointer;
    transition: 0.1s;
    box-shadow: 0px 8px 15px 0px rgb(0 0 0 / 24%);
    overflow: hidden;
    text-align: left;
    padding-left: 18px;
    display: flex;
    align-items: center;

}

.cathegory_button:hover{

    /*opacity: 0.5;*/
    outline: 2px solid rgba(255, 255, 255, 0.699);

}

/*.cathegory_button:focus{

    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5);

}
*/
/*
.cathegory_button:focus{

    opacity: 0.2;
    outline: 2px solid rgba(255, 255, 255, 0.699);

}
*/
.cathegory_button img{

    width: 24px;
    aspect-ratio: 1/1;
    opacity: 0;
    pointer-events: none;
    transition: 0.1s;

}

.cathegory_button:hover img{

    transform: scale(1.4);

}
/*
.cathegory_button:focus img{

    transform: scale(0.8);

}
*/
.cathegory_button span{

    font-family: "Poppins", sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: white;
    margin-left: 12px;

}

/*STYLE FOR WHEN IT IS PRESSED*/

.cathegory_button_pressed{

    background: white;

}

.cathegory_button_pressed img{

    filter: invert(1);

}

.cathegory_button_pressed span{

    color: black;

}

/* -------------------------------------- PROJECTS -------------------------------------- */

.projects_list{

    width: calc(100% - 400px);
    height: auto;
    background: linear-gradient(324deg, #000000 0%, #1a1a1a 100%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    --spacebetween: 30px;
    grid-gap: var(--spacebetween);
    padding: var(--spacebetween);
    grid-auto-rows: 250px;

}

.project_loading{

    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: span 2;

}

@keyframes project_loadinganim{

    from {transform: rotateZ(0deg);}
    to {transform: rotateZ(360deg);}

}

.project_loading img{

    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1/1;
    opacity: 0.35;
    animation-name: project_loadinganim;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}

@keyframes project_box_appear {

    from {opacity: 0; transform: scale(0.5);}
    to {opacity: 1; transform: scale(1);}

}

.project_box{

    height: 250px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    text-align: left;
    background: linear-gradient(324deg, #1B1B1B 0%, #373737 100%);
    border: 0px solid transparent;
    border-radius: 40px;
    outline: none;
    box-shadow: 0px 8px 15px 0px rgb(0 0 0 / 24%);
    cursor: pointer;
    transition: 0.1s;
    overflow: hidden;
    animation-name: project_box_appear;
    animation-duration: 0.2s;

}

.project_box:hover{

    outline: 2px solid rgba(255, 255, 255, 0.35);

}

.project_box:focus{

    outline: 2px solid rgba(255, 255, 255, 0.35);
    opacity: 0.2;

}

.project_box_img{

    /*height: 250px;*/
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    opacity: 0;

}

.project_box_img img{

    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: 0.3s;

}

.project_box:hover .project_box_img img{

    transform: scale(125%);

}

.project_box_desc{

    position: relative;
    flex: 1 1 0;
    height: 100%;

}

.project_box_nothover{

    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1;

}

.project_box_title{

    flex: 1 1 0;
    display: flex;
    align-items: center;
    width: 100%;
    font-family: "Poppins", sans-serif;
    font-size: 35px;
    font-weight: bold;
    padding: 17px;
    color: white;

}

.project_box_details{

    display: inline-block;
    vertical-align: middle;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.32);
    width: 100%;
    font-family: "Poppins", sans-serif;
    color: white;
    font-size: 20px;
    padding: 17px;

}

.project_box_details_state_type{

    font-weight: bold;

}

.project_box_details_state_txt{

    margin-left: 3px;

}

.project_box_details_state_type img{

    display: inline-block;
    vertical-align: middle;
    pointer-events: none;

}

.project_box_details_state_comp{

    color: #18f26c;

}

.project_box_details_state_indev{

    color: #ff9800;

}

.project_box_details_state_canclld{

    color: #ff2727;

}

.project_box_details_state_onhold{

    color: #007fff;

}

.project_box_details_state_preprod{

    color: #9332ff;

}

.project_box_desc_hover{

    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(0px);
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    color: white;
    font-size: 18px;

}

.project_box:hover .project_box_desc_hover{

    opacity: 1;
    backdrop-filter: blur(15px);

}

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

    .projects_list{

        grid-template-columns: repeat(1, 1fr);
    
    }

}

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

    .topzone_cathegoryfiltersbutton{

        display: inline;
    
    }

    .cathegorybar{

        padding-top: 74px;
        display: none;
        position: fixed;
        top: 70px;
        bottom: 0px;
        left: 0px;
        z-index: 11; /*ON TOP OF TOPBAR, MY PROJECTS TITLE AND FOOTER*/
        width: 85%;
        box-shadow: 0 0 50px 0px rgba(0, 0, 0, 0.658);
        overflow-y: auto;

    }

    @keyframes cathbar_responsiveappear {

        from {transform: translateX(-110%);}
        to {transform: translateX(0%);}
    
    }

    .cathegorybar_responsiveshown{

        display: inline;
        animation-name: cathbar_responsiveappear;
        animation-duration: 0.2s;

    }

    .cathegory_closeresponsive{

        display: inline;

    }

    .cathegory_topdarkenedresponsive{

        display: inline;

    }

    .projects_list{

        width: 100%;
        grid-auto-rows: 650px;

    }

    .project_box{

        height: 650px;
        flex-direction: column;
        
    }

    .project_box_img{

        width: 100%;

    }

    .project_box_desc{

        width: 100%;

    }

    .project_box_title{

        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        justify-content: center;

    }

    .project_box_details{
        
        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        justify-content: center;

    }

}