.main-content{
    /* border:2px solid black; */
    display:inline-block;  
    width:100%;
    /* TEMP */
    /* position:cover; */
}
.main-content .article{
    /* position */
    margin:20px 20px 20px 20px;
    padding:10px 50px;
    width:60%;
    float:left;
    /* decoration */
    border:2px dotted black;
    background-color:rgba(240, 248, 255, 0.5);
}
.side-bar{
    /* border:2px solid black; */
    width:35%;
    float:right;
    padding:30px 10px;
}
/* AUTHOR-PROFILE */
.side-bar .author-profile{
    /* border:2px solid blue; */
    /* position */
    display:flex;
    margin:10px 0px;
    padding:10px;
    /* decoration */
    background-color:#5C0120;
    color:#DAD3B6;
    border-radius:5px;
    border:2px solid #DAD3B6;
    box-shadow:1px 1px 5px 0.5px #9d9883;
}
.side-bar .author-profile div{
    text-align:center;
    margin:15px 0 0 30px;
}
.side-bar .author-profile div p{
    font-size:20px;
    font-weight:bold;
    margin:0 0 15px 0;
}
.side-bar .author-profile div button{
    background-color:rgb(0,0,0,0);
    color:#DAD3B6;
    border:2px solid #DAD3B6;
    padding:5px 10px;
    border-radius:99px;
}
.side-bar .author-profile .profile-image{
    margin:0;
    height:100px;
    width:100px;
    overflow:hidden;
    border-radius:100%;
    border:2px solid aliceblue;
}
.side-bar .author-profile .profile-image img{
    height:100%;
}
/* POPULAR-POST */
.side-bar .popular-post{
    /* border:2px solid grey; */
    background-color:#5C0120;
    color:#DAD3B6;
    border-radius:5px;
    padding:10px 0px;
}
.side-bar .popular-post h1{
    position:relative;
    padding:10px 0px;
    margin:0;
    left:10px;
    color:#DAD3B6;
}
.side-bar .popular-post a{
    transition:all 0.3s;
}
.side-bar .popular-post a:hover{
    border-bottom:2px solid #DAD3B6;
    transition:all 0.3s;
}
.side-bar .popular-post .post{
    border:2px solid #DAD3B6;
    border-radius:5px;
    display:flex;
    margin:10px;
    gap:20px;
    height:200px;
}
.side-bar .popular-post .post .image-container{
    /* border:2px solid green; */
    width:150px;
    overflow:hidden;
}
.side-bar .popular-post .post .image-container img{
    height:100%;
    /* width:10vh; */
}
.side-bar .popular-post .post .info-container{
    font-size:10px;
    /* border:2px solid yellow; */
    height:100%;
    width:100%;
    gap:0px;
    margin:0px;
    padding:0px;
    display:flex;
    flex-direction:column;
}
.side-bar .popular-post .post .info-container h1{
    font-size:25px;
}
.side-bar .popular-post .post .info-container p{
    margin:5px 0px;
    font-size:20px;
}
.side-bar .popular-post .post .info-container div{
    display:flex; 
    gap:10px;
}
.side-bar .popular-post .post .info-container *{
    margin:0px 0 0 0;
    width:100%;
    font-size:1rem;
}
/* RELATIVE-TOPIC */
.side-bar .relative-topic{
    background-color:#5C0120;   
    border-radius:5px;
}
.side-bar .relative-topic h1{
    padding:10px 10px 0px;
    color:#DAD3B6;
}
.side-bar .relative-topic ul{
    list-style:none;
    padding:0;
}
.side-bar .relative-topic ul li{
    border-bottom:2px solid #DAD3B6;
    position:relative;
    padding:10px 20px;
    left:0;
}
.side-bar .relative-topic ul li a{
    font-size:20px;
    color:#DAD3B6;
    transition:all 0.3s;
}
.side-bar .relative-topic ul li:hover a{
    font-size:30px;
    transition:all 0.3s;
}