*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    background-color: #242526;
}
.main-container{
    display: flex;
    height: 100vh;
}


/* Navigatoin Bar */
.nav{
    background-color: #242526;
    position:fixed ;
    top: 0;
    width: 100%;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* display: none; */
}

/* Nav Left part */
.left-icons{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* border: 1px solid white; */
    padding: 0 1rem;
    height: 100%;
    z-index: 1;
}
.search-icon{
    box-sizing: border-box;
    margin-left: .25rem;
    background-color: #3a3b3c;
    height: 70%;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4rem;
}
.search-icon label{
    cursor: pointer;
i{
    
    color: #b0b3b8;
}

i:hover{
    color: #fff;
}
}

.search-icon input{
    color: #fff;
    border-radius: 4rem;
    background: none;
    outline: none;
    border: none;
    font-size: 1rem;
    padding: .2rem;
    margin-left: .5rem;
    width: 80%;
}

.left-icons img, .right-icons img{
    object-fit: cover;
    width: 2.5rem;
}


/* Nav Center part */
.center-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.center-icons span{
    width: 7rem;
    height:100% ;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center-icons span a{
    height: 90%;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .1s;
    border-radius: .75rem;
}
.center-icons span a:hover{
    background-color: #515354;
}
.center-icons span a i{
    font-size: 1.5rem;
}
.active-i{
    color: #316FF6;
}
.active-span{
    border-bottom: 3px solid #316FF6;
}

/* Nav Right part */
.right-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 1rem;
    z-index: 1;
}

.right-icons span,.right-icons img{
    width: 2.5rem;
    height: 2.5rem;
    background-color: #3a3b3c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    margin: 0 .25rem;
    cursor: pointer;
    object-fit: cover;
    transition: .1s;
}
.right-icons span:hover{
    background-color: #515354;
}
.right-icons img:hover{
    filter: brightness(110%);

}


/* Main Left container */
.left-content{
    background-color: #18191a;
    color: #fff;
    width: 22.5rem;
    margin-top: 3.5rem;
    padding: .5rem;
    overflow-y: auto;
}


.upper-list,.lower-list{
    padding: 1rem .25rem;
    border-bottom: 1px solid #3e4042;
}

.list{
    display: flex;
    height: 3.25rem;
    transition: .1s;
    cursor: pointer;
    border-radius: .5rem;
    padding: .25rem;
}
.list:hover{
    background-color: #515354;
}
.list:nth-child(2) .icon i{
    color: #53d5c4;
}
.list:nth-child(3) .icon i{
    color: #209aef;
}
.list:nth-child(4) .icon i{
    color: #b64ace;
}
.list:nth-child(5) .icon i{
    color: #1e84eb;
}
.list:nth-child(6) .icon i{
    color: #2da5d9;
}

.icon{
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.icon i{
    font-size: 1.25rem;
}
.icon img{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    margin-right: .25rem;
    
}
.gray-icon{
    background-color: #3a3b3c;
}
.menu{
    flex: 1;
    letter-spacing: -.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: #d9dbe0;
    margin-left: .25rem;

}

.lower-list p,.grp-contact-container p, .right-container p{
    margin: 0 0 .5rem.5rem;
    color: #abaeb2;
    font-weight: bold;
}


/* Main center content */

.main-content{
    background-color: #18191a;
    flex: 1;
    margin-top: 3.5rem;
    padding: .5rem;
    color: #fff;
    overflow-y: auto;
}

.stories{
    position: relative;
    display: flex;
    align-items: center;
    padding: .5rem 0rem;
}

.connections{
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
}

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

.story-btn{
    height: 2.5rem;
    width: 2.5rem;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3a3b3c;
    color: #515354;
    border-radius: 50%;
    cursor: pointer;
}
.story-btn:hover{
    background-color: #3e4042;
}
.forward{
    right: .5rem;
}
.backward{
    left: .5rem;
}
.story{
    position: relative;
    cursor: pointer;
    border-radius: 1rem;
}

.story .user {
    position: absolute;
    top: 1rem;
    left: 1rem;
}
.story .user img{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 5px solid #0866ff;
    transition: .1s;
}
.story .story-img {
    width: 9rem;
    height: 14rem;
    border-radius: .5rem;
}
.story .story-img img{
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}
.story .username{
    position: absolute;
    bottom: .75rem;
    left: 1rem;
    font-size: .8rem;
}
.self-story{
    background-color: #303031;
}
.self-story .story-img{
    height:80% ;
}
.self-story .story-img img{
    border-radius: 1rem 1rem 0 0;
}
.self-story .icon{
    position: absolute;
    top: 73%;
    left: 38%;
    padding: 1rem;
    height: 2rem;
    width: 2rem;
    background-color: #0866ff;
    border: 2px solid #303031;
}
.self-story .username{
    bottom: .5rem;
    left:20% ;
}
.self-story .icon i{
    font-size: 1rem;
}

.create-post{
    background-color: #242526;
    padding: .5rem 1rem;
    margin-top: 1.5rem;
    border-radius: 1rem;
}


.create-post .input{
    border-bottom: 1px solid #3a3b3c;
    padding: .5rem .5rem 1.25rem .5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.create-post .input img{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    
}
.create-post .input input{
    width: 100%;
    background-color: #3a3b3c;
    color: #b0b3b8;
    outline: none;
    border: none;
    font-size: 1.25rem;
    padding: .5rem;
    border-radius: 1.5rem;
    
}
.create-post .input input::placeholder{
    color: #b0b3b8;
}
.create-post .icons{
    padding: .25rem 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.create-post .icons span{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .75rem 1.5rem;
    gap: .5rem;
    cursor: pointer;
    border-radius: 1rem;
    transition: .1s;
}
.create-post .icons .live-vdo i{
    color: #f02849;
}
.create-post .icons .photo i{
    color: #45bd62;
}
.create-post .icons .feeling i{
    color: #f5b828;
}
.create-post .icons span:hover{
    background-color: #3a3b3c;
}
.create-post .icons span i{
    font-size: 1.5rem;
}

.post{
    background-color: #242526;
    padding: .5rem 0rem;
    margin-top: 1.5rem;
    border-radius: 1rem;
}

.post .title{
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1rem;
}
.post .title .left{
    width: 2.5rem;
    height: 2.5rem;
    border: 4px solid #316FF6;
    border-radius: 50%;
    
img{
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
}

.post .title .center{
    flex: 1;
}

.post .title .center p:nth-child(2){
    font-size: .75rem;
    color: #abaeb3;
    margin-top: .1rem;
}

.post .title .right{
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    transition: .1s;
}
.post .title .right:hover{
    background-color: #515354;
}

.post .img{
    width: 100%;
    margin-top: 1rem;
    height: 25rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #18191a;
    font-size: 2rem;
    font-weight: 700;
}

.post .img p{
    text-align: center;
    padding: 5rem;
}
.post .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post .icons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding-top: .5rem;
}
.post .icons span{
    width: 20%;
    text-align: center;
    padding: .5rem 0rem;
    border-radius: .75rem;
    cursor: pointer;
    transition: .1s;
}
.post .icons span:hover{
    background-color: #515354;
}
.post .icons span i{
    margin-right: .5rem;
}



/* Main right content */
.right-content{
    background-color: #18191a;
    color:#fff;
    width: 22.5rem;
    margin-top: 3.5rem;
    padding: .5rem;
    overflow-y: auto;
}


.title-container{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.title-container .name{
    color: #abaeb2;
    font-weight: 600;
}
.title-container .more{
    padding: .3rem .5rem;
    color: #0866ff;
    cursor: pointer;
}
.title-container .more:hover{
    background-color: #3e4042;
}


.requests{
    display: flex;
    gap: 1rem;
    height: 5.25rem;
    border-radius: 1rem;
    cursor: pointer;
    padding: 0 .5rem;
}
.requests:hover{
    background-color: #3a3b3c;
}
.requests .left {
    display: flex;
    align-items: center;
    justify-content: center;
}
.requests .left img{
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    object-fit: cover;
}

.requests .right{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 1;
}
.requests .right .btns{
    display: flex;
    justify-content: space-evenly;
}
.btn{
    padding: .5rem 2rem;
    margin: 0 .25rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #fff;
    outline: none;
    border: none;
    background-color: #0866ff;
    border-radius: .25rem;
    cursor: pointer;
    transition: .1s;
    opacity: .9;
    
}
.btn:hover{
    opacity: 1;
}
.btn-dark{
    background-color: #303031;
}
.btn-dark:hover{
    background-color: #515354;
}
.requests .right .name-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.requests .right .name-container .name{
    font-weight: 600;
}


.contact-icons span{
    padding: .35rem .5rem;
    border-radius: 50%;
    margin: 0 .5rem;
    transition: .1s;
}
.contact-icons span:hover{
    background-color: #515354;
    cursor: pointer;
}

.right-container{
    padding: 1rem .25rem;
    border-bottom: 1px solid #3e4042;
}



/* Universal Class */

i{
    color: #fff;
}
a{
    color: #fff;
    list-style: none;
}

::-webkit-scrollbar{
    width: .5rem;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 5px;
}
.left-content:hover::-webkit-scrollbar-thumb, .right-content:hover::-webkit-scrollbar-thumb {
    background-color: #7b7878;
}