@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
    /* background: linear-gradient(75deg, rgba(3, 114, 142, 0.8), rgb(125, 207, 231), rgba(3, 114, 142, 0.4)); */
    background-color: rgba(224, 246, 255, 0.6);
    /* background-image: url('../images/pf_banner.png'); */
    background-repeat: no-repeat;
    background-size: cover;
    color: black;
    font: normal 14px/18px Nunito Sans;
}

section {
    margin: 12px 0px;
    border-bottom: 2px #000;
}

.portfolio_banner img{
    display: flex;
    margin: auto;
    width: 70%;
    /* justify-content: center; */
}

.portfolio h1{
    font: 500 46px/44px Nunito Sans;
    text-transform: uppercase;
    color: rgb(53, 28, 117);
}

.portfolio .portfolio_subtitle {
    font: 500 20px/28px Nunito Sans;
    text-transform: capitalize;
    color: rgb(53, 28, 117);
}

.portfolio_summary_content {
    border: rgb(125, 207, 231) solid 0.5px;
    border-radius: 16px;
    border-style: outset;
    padding: 8px 12px;
}

.section-title {
    text-align: center;
    font: 700 24px/32px 'Nunito Sans';
    text-decoration: underline;
    /* background-color: aliceblue; */
    color: rgb(53, 28, 117);
}

.section-subtitle {
    text-align: center;
    font: 600 20px/30px 'Nunito Sans';
    font-style: italic;
    /* background-color: aliceblue; */
    color: rgb(53, 28, 117);
    margin: 4px 0px;
}

.portfolio_experience {
    background-color: rgb(125, 207, 231, 30%);
    border-radius: 8px;
    border-color: rgb(125, 207, 231);
    border-style: inset;
    height: 280px;
    overflow-y: scroll;
}

.portfolio_experience_section_content{
    overflow-x: scroll;
}

.position-title {
    font: bold 16px/18px Nunito Sans;
    margin-bottom: 2px;
}
.experience-period {
    font: 500 12px/16px Nunito Sans;
    text-transform: uppercase;
    text-align: right;
    margin-bottom: 2px;
}
.position-in-company {
    font: 500 16px/20px Nunito Sans;
}

.portfolio_education {
    background-color: rgb(125, 207, 231, 7%);
    border-radius: 8px;
    border-color: rgb(125, 207, 231);
    border-style: solid;
    height: 100px;
    overflow-y: scroll;
}

.portfolio_education_section_content{
    overflow-x: scroll;
}

.education-title {
    font: bold 16px/18px Nunito Sans;
    margin-bottom: 2px;
}
.education-period {
    font: 500 12px/16px Nunito Sans;
    text-transform: uppercase;
    text-align: right;
    margin-bottom: 2px;
}
.education-institution {
    font: 500 16px/20px Nunito Sans;
}

.skills-list-details {
    display: flex;
}

.skills-info {
    border-radius: 4px;
    /* border: #000 solid 1px; */
    border-color: rgba(125, 207, 231, 0.5);
    border-style: ridge;
}

.portfolio_contact_info p{
    align-items: center;
}


/* SCROLLBAR - STYLES #STARTS# */
::-webkit-scrollbar {
    width: 6px;
    height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(125, 207, 231, 30%); 
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(0, 0, 0, 10%); 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(125, 207, 231); 
}
/* SCROLLBAR - STYLES #ENDS# */

/* SECTION DIVIDER - STYLE #STARTS# */
hr {
    width: 20%;
    margin: 2rem auto;
    border-style: dotted;
    border-top-width: 0.4rem;
    border-color: rgb(20, 11, 44);
}
/* SECTION DIVIDER - STYLE #ENDS# */

@media screen and (min-width: 172px) and (max-width: 768px) {
    .portfolio_banner img{
        width: 100%;
    }
    
    hr {
        margin: 1.25rem auto
    }

    .portfolio_experience_section_content{
        overflow-x: unset;
    }

    .skills-list-details {
        display: block;
        column-count: 2;
        width: fit-content;
        margin: 4px 8px;
    }

    .skills-info {
        /* width: auto; */
        /* display: flex; */
    }

    
    .portfolio_education_section_content {
        overflow-x: unset;
    } 

    .education-title {
        font: bold 14px/18px Nunito Sans;
        margin-bottom: 2px;
    }
    .education-period {
        font: 500 12px/16px Nunito Sans;
        text-transform: uppercase;
        text-align: right;
        margin-bottom: 2px;
    }
    .education-institution {
        font: 500 13px/16px Nunito Sans;
    }
}