*{
    padding: 0px;
    margin: 0px;
}
img{cursor: grab}
button{cursor: grab}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgba(242, 240, 246, 0.701) ;

}
nav{
    width: 100%;
    max-height: 60px;
    min-height: 60px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content:space-between ;
    align-items: center;
    background-color: rgb(255, 255, 255);
    border-bottom-style:none ;
    box-shadow:0px 3px  10px rgba(143, 142, 142, 0.713) ;
    
}

.div-one{
    flex: -1 1 34%;
    height: 50px;
    display: flex;
    margin-left: -10px;

    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.div-two{
    flex: 0 1 52%;
    height: 50px;
    display:flex;
    overflow: hidden;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
   
    
}
.div-three{ 
    flex: -1 2 50%;
    margin-right: 5px;
    height: 50px;
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    
    
}
.search{
   max-width: 70%;
   min-width:10% ;
   height: 90%;
   margin-left: -18px;
   position: relative;
   background-color: rgba(242, 240, 246, 0.701);
   border-radius: 25px;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
}
.in-s{
    
    max-width: 70%;
     min-width:10% ;
    height: 80%;
    border: none;
    background-color: rgba(242, 242, 245, 0.435);
    margin-left: 10px;
    outline: none;
    font-size: large;
    margin-left: 10px;
    color: rgb(30, 30, 30);
}

.o-im{
     width: 45px;
    height: 45px;
}

.os-im{
    position: absolute;
    top: 35%;
    left: 9px;
    width: 16px;
    height: 16px;
}
.os-im{
    cursor:auto;
}
.nav-ul{
    max-width: 100%;
    min-width: 90%;
    height: 50px;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
   
}
.nav-li{
    max-width: 10%;
    min-width: 20px;
    list-style: none;
   
}
.tw-im{ 
    width: 30px;
    height: 30px;
}
.tw-imm{
    width: 35px;
    height: 35px;

}
.tw-img{
   
     width: 35px;
    height: 35px;
}

.li-btn{
    max-width: 120px;
    min-width: 60px;
    margin: -100px;
    height: 49px;
    border: none;
  
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    border-bottom-left-radius:3.5px ;
     border-bottom-right-radius: 3.5px;
}
.li-btn:hover{
   background-color: rgba(201, 201, 201, 0.397);
   opacity: 50px;
     
}

.li-btn:active{
   background-color: rgba(175, 175, 175, 0.474);
}
.li-btn:focus{
    border-bottom: 3.5px solid rgb(0, 140, 255);
    
}
.tr-ul{
    max-width: 95%;
    min-width:60% ;
    height: 50px;
    display: flex;
  
    flex-direction: row;
    justify-content: right;
    align-items: center;
    gap: 7px;

}
.tr-li{
    list-style: none;  
   
}
.tr-im{
    width: 25px;
    height: 25px;
}
.tr-imm{
    width: 30px;
    height: 30px;
}
.tr-immm{
    width: 35px;
    height: 35px;
}
.tr-btn{
     display: flex;
     flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 45px;
   
    height: 45px;
   
    border: none;
    outline: none;
    border-radius: 100%;
    background-color: rgba(221, 221, 221, 0.615);
}
.tr-btn:hover{
     background-color: rgba(195, 195, 195, 0.615);
}
.tr-btn:active{
    background-color: rgba(195, 255, 255, 0.722);
}

.main-container{
    padding-top: 30px;
    width: 100%;
    background-repeat: no-repeat;
   overflow: scroll;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: rgba(242, 240, 246, 0.701) ;

}
.main-one,.main-three{
    flex: 0.9 3 15%  ;
    height: 100%;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    background-color: rgba(242, 240, 246, 0.701) ;

}
.main-two{
    flex: 2. 1 60%;
    display: flex;
    gap: 10px;
   
    justify-content: center;
    overflow: scroll;
    
}
.main-cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    height: fit-content;
  
    gap:25px;
}
.main-tn{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    gap: 3px;
    padding: 5px;
    
}
.main-btn{
    width:80% ;
    height: 40px;
    border-radius: 50px;
    text-align: left;
    padding-left: 12px;
    border: none;
    outline: none;
    font-size: larger;
    background-color: rgba(242, 240, 246, 0.701) ;
}
.main-btn:hover{
    background-color: rgba(235, 234, 249, 0.662) ;
  
}
.main-pro{
width: 10.7%;
height:  10.7%;

}
.main-im{
    width: 37px;
    height: 37px;
    border-radius: 5px;
    padding: 5px;
    background-color: rgba(242, 240, 246, 0.327) ;
}
.main-im:hover{
  background-color: rgba(233, 230, 233, 0.5) ;
    
}
.main-tn-d{
   
     display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    gap: 2px;
   padding: 10px;
}
.ssp{
    width:100% ;
    height: auto;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 10px;
    font-size: larger;
    padding: 3px;
   
}
.v-face{
    width: 100%;
    height: 500px;
    border-radius: 5px;
}
.emo{
    width:100% ;
    height: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items:baseline;
    gap: 10px;
    font-size: larger;
    padding: 3px;
}
.like-btn{
    width: 33%;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: none;
    outline: none;
     background-color: rgb(255, 255, 255);
}
.like-btn:hover{
    background-color: rgba(211, 211, 211, 0.444) ;
}
.like-btn-img{
    width: 20px;
    height: 20px;
}
.m-btn,.m-btn-tr{
    margin: 5px;
    margin-bottom: 5px;
    padding: 7px;
    width: 96%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 10px;
    font-weight: 500;
    font-size: large;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row;
    justify-content:left;
    background-color: rgba(242, 240, 246, 0.701) ;

 
}
h6{
    width: 90%;
    height: 100%;
    font-size: x-large;
    font-weight: 300;
    border-bottom: 1px solid grey;
}
.m-btn:hover{
    background-color: rgba(202, 202, 202, 0.41) ;
    opacity: 50px;
}
.m-btn-tr:hover{
     background-color: rgba(202, 202, 202, 0.41) ;
    opacity: 50px;
}
.main-two{
    flex: 2.1 1 50%  ;
    height: 100%;
}
img{
    width: 45px;
    height: 45px;
}
.m-img{
    width: 35px;
    height: 35px;
}
.create{
    border-radius: 100%;
    width: 45px;
    height: 45px;
    padding: 10px;
    background-color: rgba(225, 225, 226, 0.697);
}
.create:hover{
     background-color: rgba(181, 181, 181, 0.697);
    
}
.abd{
    display: flex;
    justify-content: space-between;
}
.op{
   
    border-radius: 100%;
    padding: 15px;
}
.op:hover{
    background-color: rgba(217, 217, 217, 0.583);
}
@media (max-width: 999px){
     .div-two{
        overflow: hidden;
     }
     
.main-cont{
width: 100%;
}
     
.main-one{
  flex: 0 0 0%  ;
}
.main-three{
    flex: 1 1 25%  ;

}
}
@media (max-width: 1140px){
.div-one,.div-three{
    flex: 1 1 30%;
}
.div-two{
    overflow: hidden;
    flex: 2 1 30%;
}
}
@media (max-width: 768px) { 
    
.main-two{
    flex: 4 1 100%;
    
}
 }
 @media (max-width: 576px) { 
    .main-two{
    flex: 4 1 100%;
    
}
.div-one,.div-three{
    flex: 2 1 50%;
}
.main-one,.main-three{
    flex: 0 0 0%  ;

}
.div-two{
     flex: 0 0 0%  ;
}
.div-one{
    gap: 5px;
}
.o-im{
    margin-left: -25px;
}

.search{
    margin-left: -60px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
}
.in-s{
    width: 40px;
    border-radius: 100%;
    width: 0%;
    height: 0%;
    
}
.os-im{
    position: absolute;
    top: 29%;
    left: 29%;
    width: 24px;
    height: 24px;
}
.search,.in-s:hover{
    background-color: rgba(203, 202, 200, 0.827);
    opacity: 50%;
   
}
}
@media (max-width: 388px){
.div-three{
    flex: 2 1 40%;
    justify-content: space-around;
}
.div-one{
    display: flex;
     flex: 2 1 60%;
      justify-content: center;
     align-items: center;
     gap: 8px;
      margin-left: 2px;
}
.search{
    margin-left: 2px;
}
}
@media (max-width: 348px){
.div-three,.tr-ul{
    flex: 1 2 20%;
    justify-content: space-around;
    gap: -9px;

}
.in-s{
    margin-left: 12px;
}
.div-one{
    display: flex;
     flex: 2 1 60%;
      justify-content: center;
     align-items: center;
}
.div-two{
     flex: 0 0 0%;
}
.div-one{
    gap: 50px;
}
.search{
    margin-left: 3px;
}
}