*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
    Helvetica, Arial, sans-serif;
}

body{
    width: 100%;
    background: #FBFBFA;
    position: static;  
    height: 400vh;  
}

.sidebar{       
    width: 17.9vw;
    height: 100vh;
    background: #ffffff;
    border-right: 1px solid #DADBDA;   
    display:flex;    
    /* background-color: rgb(177, 220, 167); */
    position: fixed;
}

.nav-wrapper{
    padding-left: 19px;
    padding-top: 34px;
    width: 17.5vw;
    /* background-color: rgb(159, 233, 169); */
}
#brand{
    height: 39px;
    width: 111px;
}
.nav-items {    
    padding-top: 38px;
    height: 545px;    
    width: 15.8vw;
    /* background-color: rgb(252, 158, 158); */
    line-height: 29px;
}
.round-div{
    width: 210px;
    height: 35px;
    padding-left: 7px;
    /* background-color: rgb(181, 223, 42);     */
    cursor:pointer; 
    border-radius: 500px;  
}
.round-div:hover{
    background: #FBFBFA;
} 

a{
    text-decoration: none;
    color:black
}
.icon{        
    height:22px;
    width:22px;
    /* background-color: rgb(203, 94, 94); */
}
.nav-text{
    margin-left: 11px;
    width:200px;
    color: rgb(2, 2, 2);
    /* background-color: rgb(203, 94, 94); */
}

#propic{
    height: 25px;
    width: 25px;
    border-radius: 50%;
    cursor:pointer;
    display: inline-block;
    align-items:inherit
}

.main{
    /* background-color: #cdcd2d;     */
    margin-left: 386px;
    height: 400vh;
    width: 468px;
    padding-top: 26px;
}
.story-wrapper{
    background-color: #ffffff;
    border: 1px solid #DADBDA; 
    height: 117px;
    width: 468px;
    border-radius: 10px;
    margin-bottom: 16px;
    display: flex;
    padding: 10px;      
    align-items: center;
    overflow: hidden;
    
}
.story-card{
    flex:0 0 auto;
    width:64px;
    max-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
}
.profile-pic{
    width: 66px;
    height: 66px;
    overflow: hidden;
    padding: 3px;
    border-radius: 50px;
    background: linear-gradient(45deg,rgb(255,230,0),rgb(255,0,128));
}

.profile-pic img{
    width:100%;
    height: 100%;
    object-fit: cover; 
    text-align: center;
    /* color: black; */
    border-radius: 50%;
    border: 2px solid #ffffff
    
}
.username{
    width:100%;    
    overflow: hidden;
    font-size: 12px;
    margin-top: 5px;
    text-align: center;
    /* background-color: aqua; */
    width: 5vw;
}

.post{    
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #DADBDA; 
    height: 765px;
    width: 468px;
    margin-bottom: 12px;
    
}

.info{
    border-radius: 10px;
    width: 100%;
    height:60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    /* background-color: #050c02; */
}
.info .user{
    display: flex;
    align-items:center;
    /* background-color: rgb(218, 33, 33); */
}

.info .username{
    width: auto;
    font-weight:600;
    color: black;
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer;
    /* background-color: #46a71a; */
}
.info .options{
    height: 12px;
    cursor: pointer;
    /* background-color: rgb(218, 33, 33); */
}

.profilepic{
    width: 39px;
    height: 39px;
    overflow: hidden;
    padding: 2px;
    border-radius: 50px;
    background: linear-gradient(45deg,rgb(255,230,0),rgb(255,0,128));
}

.profilepic img{
    width:100%;
    height: 100%;
    object-fit: cover; 
    text-align: center;
    /* color: black; */
    border-radius: 50%;
    border: 2px solid #ffffff    
}

.post-image{
    width: 100%;
    height: 471px;
    object-fit: cover;
    border-top: 0.5px solid #DADBDA;
}

.post-content{
    width: 100%;
    padding-left: 10px;
    padding: 20px;
}

.likes{
    font-weight: 600;
    
    font-size: 14px;
}

.description{
    margin: 10px 0;
    font-size: 14px;
    line-height: 20px;
}

.description span{
    font-weight: 600;
    margin-right: 10px;
}

.comments{
    color: #5b5f5bdc;
    margin: 10px 0;
    font-size: 14px;
}

.post-time{
    color: #5b5f5bdc;
    font-size: 10px;
}

.comment-wrapper{
    width: 100%;
    height:50px;
    border-top: 1px solid #DADBDA;
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: space-between;
    align-items: center;
}

.comment-wrapper .icon{
    margin-top: 6px;
    height: 23px;
    width: 23px;
    /* background-color: rgb(21, 138, 99); */
}

.comment-box{
    margin-top: 6px;
    margin-left: 10px;
    width: 230%;
    height:50px;
    border: none;
    outline: none;
    font-size: 14px;
    /* background-color: aquamarine; */
}

.comment-btn{
    margin-top: 6px;
    width: 70px;
    height: 100%;
    background: none;
    border:none;
    outline:none;
    text-transform: capitalize;
    font-size: 14px;
    color:rgb(0,162,255);
    opacity: 0.5;
    /* background-color: rgb(62, 146, 118); */
}

.reaction-wrapper{
    width: 108%;
    height: 50px;
    display: flex;
    margin-top:-20px;
    margin-left: -20px;
    align-items: center;
    /* background-color: rgb(62, 146, 118); */
}

.reaction-wrapper .icon{
    height: 23px;
    width: 25px;
    margin: 0;    
    margin-left:15px;
    /* background-color: rgb(3, 17, 12); */
}

.reaction-wrapper .save{
    height: 25px;
    margin-left:auto;
    /* background-color: rgb(62, 146, 118); */
}

.right-col{
    margin-top: -394vh;
    margin-left: 887px;
    /* background-color: black; */
}


.profcard{
    width: 340px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    /* background-color: rgb(207, 3, 3); */
}
.profpic img{
    width: 56px;
    height: 56px;
    overflow: hidden;
    padding: -16px;
    border-radius: 50px;
    /* background: linear-gradient(45deg,rgb(255,230,0),rgb(255,0,128)); */
}

.proftext{
    margin-left: 20px;
    /* background-color: #bffd04; */
    
}

.proftext .user-name{
    font-weight: 600;
    font-size: 14px;
    color: black;
}

.sub-text{
    color: #9C9C9D;
    font-size: 14px;
    font-weight: 400;

}

.action-btn{    
    margin-top: 6px;
    margin-left:auto;
    width: 70px;
    height: 100%;
    background: none;
    border:none;
    outline:none;
    font-weight: bold;
    text-transform: capitalize;
    font-size: 12px;
    color:#6EB3F6;
    /* background-color: black; */
}


.suggestion-box{
    
    margin-top: 18px;
    margin-left: 5px;
    /* background: #f8f80f; */
    width: 330px;
}
.sugg-card{
    width: 340px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    /* background-color: rgb(207, 3, 3); */
}
.sugg-pic img{
    width: 33px;
    height: 33px;
    border-radius: 50px;
    background-color: rgb(12, 7, 7);
}
.sugg-text{
    margin-left: 10px;
    font-size: 14px;
    font-weight: 400;
    /* background-color: aquamarine; */
}
.sugg-btn{
    margin-top: 6px;
    margin-left:auto;
    width: 70px;
    height: 100%;
    background: none;
    border:none;
    outline:none;
    font-weight: bold;
    text-transform: capitalize;
    font-size: 12px;
    color:#6EB3F6;
}

.see-all{
    width: 320px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    /* background-color: rgb(207, 3, 3); */
}

.SFY{
    font-size: 14px;
    color: #959494;
    font-weight: 600;
}

.All{
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
}

.about{
    margin-top:30px;
    width: 330px;
    font-size: 12px;
    color: #C6C6C7;
    /* background-color: rgb(206, 228, 10); */
}

.copyright{
    margin-top:17px;
    width: 330px;
    font-size: 12px;
    color: #C6C6C7;
    /* background-color: rgb(207, 3, 3); */
}