*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  Roboto,Arial, Helvetica , sans-serif;
}
a{
    text-decoration: none;
    color:#999;
    
}
body{
    position: relative;
}
header{
    border: 1px solid #999;
    padding: .8rem 12rem;
    height: 60px;
    position: fixed;
    width: 100%;
    background-color: white;
   

}
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  
}

.menus{
    display: flex;
    justify-content: space-around;
}
.menus img{
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
.menus svg{
    margin-right: 10px;
}
.search input{
    border: 1px solid #999;
    border-radius: 3px;
    height: 30px;
    text-align: center;
    
}
.home_container{
    background-color: #f9f9f9;
    height: 100%;
    width: 100%;
    
 
    
    padding: 0 10rem;
    display: flex;
    
 
    
  
    /* position: relative; */

}
.post_section{
    
    margin-top: 50px;
    padding: 2rem;
    min-width: 350px;
    max-width: 800px;
    height: 100%;
}
.status_list{
    display: flex;
    justify-content: flex-start;
    border: 1px solid rgb(160, 158, 158);
    padding: 1rem 1rem;
    border-radius: 3px;
    background-color: white;
    overflow: scroll;
    height: 100px;
    
    


}
.status_list::-webkit-scrollbar {
    display: none;
  }
  

.status_list{
    -ms-overflow-style: none;  
    scrollbar-width: none; 
  } 
  .status_user div{
    background: rgb(0,15,36);
    background: linear-gradient(135deg, rgba(0,15,36,0.6530987394957983) 0%, rgba(31,9,121,1) 20%, rgba(230,250,30,0.8379726890756303) 34%, rgba(255,0,159,0.8239670868347339) 100%);
    border-radius: 50%;

      
  }
.status_user{
    width: 50px;
    margin-right: 1.5rem;
    font-size: 12px;
    cursor: pointer;
   
  

}
.status_user img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid whitesmoke;
}
.post{
    margin: 2rem 0;
    border: 1px solid #999;
    background-color: white;
    border-radius: 3px;
    width: 100%;
    

}
.post_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem ;
    

}
.post_header img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: .5rem;

}
.post_user_detail{
    display: flex;

}
.post_user_detail img{
    cursor: pointer;
}
.detail p{
    font-weight: bold;
    cursor: pointer;
}
.detail p:hover{
    text-decoration: underline;

}
.post_menu{
    cursor: pointer;
}

.post_body img{
    width: 100%;
    height: 500px;
    

}
.post_bottom{
    background-color: white;
    padding: .4rem 1rem;
}

.btns{
    display: flex;
    justify-content: space-between;

}
.likeBtn svg{
    margin-right: 1rem;
}
.comment_view{
    font-size: 14px;
    line-height: 1.3rem;
}
.comment_view1{
    display: flex;
    
}
.comment_view1 img{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: .5rem;

}
.comment_view span{
    font-weight: bolder;

}
.gray{
    color: #999;
    font-weight: 100;
    
}
.each_comment{
    display: flex;
    justify-content: space-between;
}
 small{
    color: #999;
    font-size: 10px;
}
.comment{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1rem;
    border-top: 1px solid #999;
    
}

.Emoji{
    flex: 1;
}
.comment_line{
    flex: 5;
}
.comment input{
    flex: 2;
    width: 28rem;
    border: 0;
   margin-left: 1rem;
   height: 20px;
    
}
.comment button{
    border: 0;
    background-color: #f9f9f9;
    font-size: 14px;
    color: #0095f6;
    font-weight: bold;
    
   
}
.friends{
    margin-top: 50px;
    padding: 2rem 0;
    /* flex: 1; */
    height: 100vh;
    
    position: fixed;
   
    /* text-align: right; */
    right:  150px;
  
    /* right: 250px; */
    

}
.swich{
    display: flex;
    justify-content: space-between;
   
    /* width: 100%; */
    font-size: 14px;
    padding: 1rem 0;

}
.swich img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: .5rem;
}

.g{
    display: flex;
    align-items: center;
    font-weight: bold;
    
}
.swich button, .frid button{
    border: 0;
    background-color: #f9f9f9;
    font-size: 14px;
    color: #0095f6;
    font-weight: bold;

}
.frid img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: .5rem;
}
.frid{
    display: flex;
    justify-content: space-between;

    width: 100%;
    font-size: 14px;
    padding: .4rem 0;


}
.friens_list{
    margin-right: 0;

}
.sggest{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 1rem 0;
    font-weight: bold;
}
.sggest p{
    color: #999;
    
}
.sggest span{
    font-size: 12px;
    
}
.footer{
    line-height: 1rem;
    margin-top: 3rem;
    font-size: 10px;
    color: #999;
   

}
@media only screen and (max-width: 1296px) {
    .friends{
        display: none;
    }
    .home_container{
 
        padding: 0 8rem;
    
    }
    .post_section{
    
        margin-top: 50px;
        
        min-width: 350px;
        max-width: 100%;
        
        
        height: 100%;
  
    }
    
}
@media only screen and (max-width: 900px){
    .home_container{
        padding:20px 10px;
        width: 100%;
    }

}
@media only screen and (max-width: 600px) {
   
    .friends{
        display: none;
    
    }
    .home_container{
        padding:20px 0;
        width: 100%;
    }
    header{
        padding: 20px ;
    }
    .search{
        display: none;
    }
    .post_section{
        width: 100%;
        padding: 0;
    }

   
    .post{
        margin: 0 0;
        border: 0;
        background-color: whitesmoke;
  
    }
    .post_bottom{
        background-color: whitesmoke;
        padding: .4rem 1rem;
    }
    .comment{
        display: none;
        border-top:0;
    }
    
    
   

  }