*{
    --light-blue: #8FC1E3;
    --medium-blue: #5085A5;
    --dark-blue: #31708E;
    scroll-behavior: smooth;
}

body{
    margin: 0px;
    overflow-y: hidden;
    color: white;
}

header{
    position: fixed;
    top: 20px;
    left: 10px;
}

header img{
    width: 40px;
}

nav{
    background-color: var(--medium-blue);
    transform: translateX(-100%);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    
    position: fixed;
    z-index: 999;
    padding-top: 20px;
    padding-left: 10px;
    border-radius: 0px 14px 14px 0px;
    width: 50%;
}

nav a{
    color: var(--light-blue);
    text-decoration: none;
}

.nav_open{
    transform: translateX(0px);
}

nav .menu_link{
    padding: 20px;
}

nav img{
    width: 40px;
}

.portfolio_part_content{
    padding-left: 5%;
    padding-right: 5%;
}

.portfolio_part{
    min-height: 100vh;
}

.part_content_title{
    padding-left: 80px;
    padding-top: 20px;
    margin-bottom: 10px;
    height: 40px;
}

.portfolio_part_content{
    height: 85vh;
}

.portfolio_bg_light{
    background-color: var(--light-blue);
}

.portfolio_bg_light .portfolio_part_content{
    background: url("../images/cog_bg_light_part_bg.svg");
    background-size: 100% 100%;
}

.portfolio_bg_light .portfolio_part_content .categories_item{
    background-color: var(--medium-blue);
}

.portfolio_bg_light .portfolio_part_content .categories_item.active_categorie{
    background-color: var(--light-blue);
}

.portfolio_bg_light .portfolio_part_content .select_items_categorised .categorised_item{
    background-color: var(--light-blue);
}

.portfolio_bg_light .portfolio_part_content .slider_action_button svg path{
    fill: var(--light-blue);
}

.portfolio_bg_light .portfolio_part_go_next_part svg path{
    fill: var(--medium-blue);
}

.portfolio_bg_medium{
    background-color: var(--medium-blue);
}

.portfolio_bg_medium .portfolio_part_content{
    background: url("../images/cog_bg_medium_part_bg.svg");
    background-size: 100% 100%;
}

.portfolio_bg_medium .portfolio_part_content .categories_item{
    background-color: var(--dark-blue);
}

.portfolio_bg_medium .portfolio_part_content .categories_item.active_categorie{
    background-color: var(--medium-blue);
}

.portfolio_bg_medium .portfolio_part_content .select_items_categorised .categorised_item{
    background-color: var(--medium-blue);
    color: var(--white);
}

.portfolio_bg_medium .portfolio_part_content .slider_action_button svg path{
    fill: var(--light-blue);
}

.portfolio_bg_medium .portfolio_part_go_next_part svg path{
    fill: var(--dark-blue);
}

.portfolio_bg_dark{
    background-color: var(--dark-blue);
}

.portfolio_bg_dark .portfolio_part_content{
    background: url("../images/cog_bg_dark_part_bg.svg");
    background-size: 100% 100%;
}

.portfolio_bg_dark .portfolio_part_go_next_part svg path{
    fill: var(--light-blue);
}

.categorised_item_skills{
    background: url("./../images/skills_elem_bg.svg") rgba(49, 112, 142, 44);
    background-size: 95% 95%,contain;
    background-repeat: no-repeat, repeat;
    background-position: center, 0px 0px;
}

.categorised_item_projects{
    background: url("./../images/projects_elem_bg.svg") rgba(49, 112, 142, 44);
    background-size: 95% 95%,contain;
    background-repeat: no-repeat, repeat;
    background-position: center, 0px 0px;
}

.portfolio_part_content h1{
    margin: 0px;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bolder;
    color: var(--dark-blue);
}

#homepage .portfolio_part_content{
    display: flex;
    align-items: center;
    justify-content: center;
}

.profil_photo_part{
    margin: 0px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bolder;
    color: var(--dark-blue);
}

.profil_text_part{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profil_text_part img{
    border: var(--dark-blue) dashed 5px;
    border-radius: 10px;
}

.portfolio_part_go_next_part{
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profil_photo_part{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profil_photo_part .photo img{
    border-radius: 100%;
    width: 125px;
    height: 125px;
    border: dashed 5px var(--dark-blue);
    border-style: dashed;
}

.selectors{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-left: auto;
    margin-right: auto;
}

.select_item{
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.select_categories{
    column-gap: 20px;
    row-gap: 25px;
    width: 280px;
    margin-top: 50px;    
    margin-bottom: 30px;
}

.select_items_categorised{
    display: none;
    width: fit-content;
    gap: 20px;
}

.select_items_categorised_active{
    display: grid;
}

.categories_item{
    width: 84px;
    height: 84px;
    background-color: var(--light-blue);
}

.categorised_item{
    width: 110px;
    height: 110px;
    background-color: rgba(49, 112, 142, 44);
}

.select_item_visible_area{
    width: 373px;
    overflow: hidden;
}

.slider_action_button{
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.slider_action_button svg path{
    fill: var(--dark-blue);
}

.slider_action_button svg:nth-child(1){
    transform: rotate(90deg);
}

.slider_action_button svg:nth-child(2){
    transform: rotate(-90deg);
}

.active_categorie{
    background-color: var(--dark-blue);
}

.popUpContainer{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
}

.popUp{
    width: 80%;
    height: 50vh;
    padding: 20px;
    position: relative;
    background-color: var(--medium-blue);
    border-radius: 14px;
}

.popUpskills{
    background-color: var(--medium-blue);
}

.popUpskills .detailsTitlesAndImg img{
    background-color: var(--dark-blue);
}

.popUpprojects{
    background-color: var(--dark-blue);
}

.popUpprojects .detailsTitlesAndImg img{
    background-color: var(--light-blue);
}

.popUpstudies{
    background-color: var(--light-blue);
}

.popUpstudies .detailsTitlesAndImg img{
    background-color: var(--medium-blue);
}

.popUp p {
    color: white;
}

.popUp p span{
    font-weight: bold;
}

.popUpskills p span{
    color: var(--light-blue);
}

.popUpprojects p span{
    color: var(--light-blue);
}

.popUpstudies p span{
    color: var(--dark-blue);
}

.detailsTitlesAndImg{
    margin-top: 20px;
    display: grid;
    grid-template-columns: 30% 1fr;
    column-gap: 20px;
    align-items: center;
}

.detailsTitlesAndImg h3{
    color: var(--light-blue);
    font-size: 22px;
}

.popUpstudies .detailsTitlesAndImg h3{
    color: var(--dark-blue);
}

.detailsTitlesAndImg img{
    width: 100%;
    height: auto;
    background-color: white;
    border-radius: 20px;
}

#studies{
    background: url(../images/cog_ending_bg.svg) var(--medium-blue);
    background-position: bottom;
}

.studies_content{
    margin-top: 50px;
    display: grid;
    grid-template-columns: 115px 1fr;
}

.studies_content .select_categories{
    display: flex;
    margin-top: 59px;
    flex-direction: column;
}

.select_item_slider{
    gap: 15px;
}

.studies_content .select_item_visible_area{
    height: calc(125px * 4);
    width: initial;
    overflow: hidden;
}

.studies_content .select_items_categorised{
    display: none;
    flex-direction: column;
}

.studies_content .select_items_categorised_active{
    display: flex;
    flex-direction: column;
}

.studies_content .categorised_item{
    display: flex;
    flex-direction: column;
    width: 60vw;
}

.studies_content .slider_arrow{
    text-align: end;
    margin: 10px;
}

.studies_content .slider_arrow_back svg{
    transform: rotate(180deg);

}

@media screen and (min-width: 1200px) {
    .portfolio_bg_light .portfolio_part_content{
        background: url("../images/cog_bg_light_part_bg_desktop.svg");
        background-size: 100% 100%;
    }

    .portfolio_bg_medium .portfolio_part_content{
        background: url("../images/cog_bg_medium_part_bg_desktop.svg");
        background-size: 100% 100%;
    }

    .portfolio_bg_dark .portfolio_part_content{
        background: url("../images/cog_bg_dark_part_bg_desktop.svg");
        background-size: 100% 100%;
    }
    
    .profil_content{
        display: flex;
        gap: 30px;
    }

    .profil_photo_part .photo img{
        width: 250px;
        height: 250px;
    }

    .profil_text_part img{
        width: 50%;
    }

    .skills_content{
        display: grid;
        grid-template-columns: 1fr 1fr;

    }

    .select_items_categorised{
        padding-top: 45px;
    }

    #studies{
        background-position: center;
    }

    .studies_content div.select_item.categorised_item{
        height: 75px;
    }
}