body {
    background-color: #dbe7ff;
}
html, body {
    margin: 0px;
    padding: 0px;
    
} 
/* header */
.header-bar{
    /* position: absolute; */
    width: 100%;
    padding: 0;
    margin:  0;
    margin-top: 5px;
    /* height: 250px; */
    display: inline-block;
    overflow: auto;
}
.jumbotron{
    padding: 30px;
    background: rgb(2,0,36);
    background: linear-gradient(180deg, #54b2ff 0%, #bbcbf1 58%, #dbe7ff 100%);
}
.header-container {
    margin: 10px auto;
    display: block;
    height: 90%;
    width: 80%;
    overflow: auto;
    /* background-color: white */
}   
.header-container >*{
    margin: 20px; 
}
.header-profile-img{
    width: 150px;
    border-radius: 100%;
}
.profile-content{
    margin-left:50px;
}

/* content  */
.content-container{
    width: 80%;
    margin: 0 auto;
    display:  grid;
    grid-gap: 10px;
    grid-auto-rows: minmax(100px,auto);
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch;
    justify-items: stretch;
    grid-template-areas:
    "content content info"
    ;
}
.info-main >i{
    margin-right: 10px;
    width: 30px;
}
/* .info-main-i{
    display: inline;
    width: 30px;
} */
.content-container >* {
    /* border: #5BA3EF 2px solid; */
    /* background-color: white; */
}
.content{
    grid-area: content;
}
.info{
    grid-area: info;
}
.info >*{
    margin-bottom: 30px;
    
}   
.content >*{

    margin-bottom: 30px;
}
.social-media >*{
    margin: 5px;
}
@media only screen and (max-width: 1000px) {
    .content-container{
        grid-template-columns: 1fr;
        grid-template-areas:
        "content"
        "info"
        ;
    }
    .profile-content{
        margin-left:0px;
    }
    .header-container{
        display: grid;
        justify-content: center;
    }
}