/*---------------------------------- about----------------------------------------*/

.title{
    /* border: 2px solid black; */
    border: 1px solid #607d75;
}
.page-title {
    width: 100%;
    /* position: relative; */
    /* left: -8.5%;
    right: -8.5%; */
    /* margin-left: 0vw;
    margin-right: 0vw; */
    padding: 55px;
    
}

/* modified icon ----------------------------------------*/

.bi {
    font-size: 40px;
}

/*Percentage-scale ----------------------------------------*/
.hrline {
    width: 50%;
    color: whitesmoke;
}
.area{
    display: inline-block;
    margin: 0px;
}
.scale {
    border: 1px solid black;
    border-radius: 5px;
    padding: 2px;
}

.html-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 80%, white 20%);
}

.css-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 88%, white 12%);
}

.js-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 70%, white 30%);
}

.bootstrap-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 88%, white 12%);
}

.php-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 70%, white 30%);
}

.node-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 65%, white 35%);
}

.linux-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 65%, white 35%);
}

.mysql-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 70%, white 30%);
}

.mongo-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 60%, white 40%);
}
.docker-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 60%, white 40%);
}

.git-scale {
    background: linear-gradient(to right, rgb(83, 73, 159) 65%, white 35%);
}

/* Education & Experience ----------------------------------------*/

.item-period {
    display: inline-block;
    border: 2px solid rgb(191, 183, 255);
    padding: 4px 7px;
    border-radius: 15px;
    font-size: 0.8em;
}

.icon-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.icon-bg{
    display: inline-block;
    margin-left: .8rem;
    margin-bottom: .8rem;
    padding: 5px 30px;
    border-radius: 20px;
    /* background: #978f8f; */
}
.icon-content{
    flex-direction: row;
}
.fs-icon{
    font-size: 6rem;
}
.img-size{
    max-block-size: 100px;
}
/* -------------media Query------------- */

@media(max-width: 555px){
    /* .img-fluid{
        max-block-size: 70px;
    } */

    .fs-icon{
        font-size: 5rem;
    }
}