/*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%);

}

.project_container{

    display: flex;
    flex-direction: row;
    /*height: 85vh;*/
    height: auto;

}

.projectcontainer_section{

    flex: 1 1 0;
    display: flex;
    flex-direction: column;

}

/* --------------------------------- PROJECT MEDIA --------------------------------- */

.project_media{

    background: rgba(0, 0, 0, 0.4);
    max-width: 50vw;
    display: flex;
    flex-direction: column;
    min-height: 85vh;
    z-index: 0;

}

.project_media_showing{

    flex: 1 1 0;
    position: relative;

}

@keyframes media_appearing{

    from {opacity: 0;}
    to {opacity: 1;}

}

.project_media_showing img{

    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    animation-name: media_appearing;
    animation-duration: 0.5s;
    display: none; /*INITIALLY*/

}

.project_media_showing iframe{

    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /*animation-name: media_appearing;*/
    display: none; /*INITIALLY*/

}

.project_media_select{

    height: auto;
    background: rgb(0, 0, 0);
    overflow-y: hidden;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    --projectmediaselectpadding: 5px;
    gap: var(--projectmediaselectpadding);
    padding: var(--projectmediaselectpadding);
    justify-content: center;
    border-top: 1px solid #3b3b3b;

}

.project_media_select_button{

    position: relative;
    height: 70px;
    aspect-ratio: 1/1;
    background: linear-gradient(324deg, #000000 0%, #242424 100%);
    border-radius: 15px;
    cursor: pointer;
    overflow: hidden;
    padding: 0px;
    user-select: none;
    transition: 0.1s;
    outline: none;

}

.project_media_select_button_img{

    opacity: 0; /*INITIALLY*/
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.1s;
    pointer-events: none;
    z-index: 0;

}

.project_media_select_button:hover .project_media_select_button_img{
    
    transform: scale(1.25);
    
}

.project_media_select_button_video{

    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;

}

.project_media_select_button_playicon{

    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1/1;
    width: 70%;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.1s;

}

.project_media_select_button:hover .project_media_select_button_playicon{
    
    transform: translateX(-50%) translateY(-50%) scale(1.25);
    opacity: 0.5;
    
}

.project_media_select_button_unpicked{

    border: 2px solid rgb(102, 102, 102);

}

.project_media_select_button_unpicked:hover{
    
    transform: scale(0.9);
    border: 2px solid rgb(255, 255, 255);
    
}

.project_media_select_button_unpicked:focus{

    transform: scale(0.9);
    opacity: 0.5;

}

.project_media_select_button_picked{

    border: 3px solid rgb(0, 153, 255);
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.6);

}

.project_media_select_button_picked:hover{
    
    border: 3px solid rgb(255, 255, 255);
    box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.842);
    
}

.project_media_select_button_picked:focus{

    opacity: 0.5;
    
}

/* --------------------------------- PROJECT DATA --------------------------------- */

.project_info{

    z-index: 1;
    box-shadow: 0px 0px 60px #0000007e;

}

.project_info_data{
    
    flex: 3 1 0;
    background: linear-gradient(324deg, #121212 0%, #2b2b2b 100%);
    padding: 30px;
    
}

.projectdata_title{

    display: block;
    font-family: "Poppins", sans-serif;
    color: white;
    font-size: 50px;
    font-weight: bold;
    text-shadow: 0px 10px 30px rgba(0,0,0, 0.5);

}

.projectdata_additionalinfo{

    background: rgba(0, 0, 0, 0.5);
    --additionalinfo_margin: 10px;
    --additionalinfo_sidepadding: 15px;
    border-radius: 500px;
    display: inline-block;
    width: auto;
    margin-top: var(--additionalinfo_margin);
    margin-bottom: var(--additionalinfo_margin);
    color: white;
    font-family: "Poppins", sans-serif;
    padding: 10px;
    padding-left: var(--additionalinfo_sidepadding);
    padding-right: var(--additionalinfo_sidepadding);

}

halfopacityrow{

    opacity: 0.5;
    font-weight: lighter;
    margin-inline: 8px;

}

.projectdata_description{

    display: block;
    font-family: "Poppins", sans-serif;
    color: white;
    margin-top: 10px;

}

/* --------------------------------- PROJECT PLATFORMS --------------------------------- */

.project_info_platforms{

    /*height: 200px;*/
    /*height: auto;*/
    flex: 2 1 0;
    padding: 30px;

}

.projectplatforms_title{

    display: block;
    font-family: "Poppins", sans-serif;
    color: white;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 15px;

}

.projectplatforms_button{

    background: none;
    border: 2px solid white;
    border-radius: 400px;
    display: inline-flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    transition: 0.3s;
    margin-right: 5px;
    margin-bottom: 5px;

}

.projectplatforms_button:hover{

    background: white;

}

.projectplatforms_button:focus{

    opacity: 0.25;

}

.projectplatforms_button img{

    --platformbutton_size: 35px;
    width: var(--platformbutton_size);
    border-radius: var(--platformbutton_size);
    aspect-ratio: 1/1;
    opacity: 0;

}

.projectplatforms_button span{

    font-family: "Poppins", sans-serif;
    color: white;
    margin-left: 5px;
    font-size: 17px;
    transition: 0.3s;

}

.projectplatforms_button:hover span{

    color: black;

}

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

    .project_container{

        flex-direction: column;

    }

    .project_media{

        aspect-ratio: 1/1.36;
        min-height: unset;
        max-height: 680px;
        max-width: 100vw;

    }

    .project_media_select{

        height: auto;
        flex-wrap: wrap;

    }

    .project_info_data{

        padding: 15px;

    }

    .projectdata_title{

        text-align: center;

    }

    .projectdata_additionalinfo{

        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 18px;
        border-radius: 40px;

    }

    .projectdata_description{

        text-align: center;
        font-size: 18px;
        margin-top: 22.5px;
        margin-bottom: 22.5px;

    }

    .projectplatforms_title{

        text-align: center;
        font-size: 35px;
        margin-bottom: 28px;

    }

    .projectplatforms_buttonscontainer{

        display: flex;
        flex-direction: column;
        gap: 10px;

    }

    .projectplatforms_button img{

        --platformbutton_size: 45px;

    }

    .projectplatforms_button span{

        font-size: 20px;

    }

}