@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Poppins:ital,wght@1,100&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


*{ 
  font-family: 'Open Sans', sans-serif;
  font-family: 'Poppins', sans-serif;
  font-family: 'Roboto', sans-serif; 
  color: rgb(231, 233, 234);
  background: black; 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
.main-container{  
display: flex; 
height: calc(100vh - 1px);
overflow: hidden 
}

.sidebar{  
  width: 250px; 
  height: 100%; 
  overflow-y: hidden; 
overflow-x: hidden;  
border-right: 1px solid rgb(47, 51, 54); 
}

.categories .category{ 
width: 100%; 
display: flex; 
align-items: center; 
height: 40px; 
padding: 0 35px ; 
font-size: 14px; 
font-weight: 400; 
cursor: pointer;
}
.categories .home{ 
  margin-left: 20px; 
  font-weight: 600;
}
.categories .content{ 
  margin-left: 20px;  
  width: 0px; 
  padding-left: 1px ;
} 


.my-custom-color-class path {
  fill: rgb(231, 233, 234);   
}

.logo img{ 
 width : 50px;    
margin-left: 18px; 
} 


.post-button { 
margin-left: 45px;
margin-top: 20px;  
}

.post-button a {
  text-decoration: none;  
}

.post-button button {
  background-color: #1DA1F2; 
  color: #fff; 
  font-size: 20px; 
  padding: 10px 70px; 
  border-radius: 28px;
  border: none;  
  cursor: pointer;  
  font-size: 16px; 
  font-weight: 700;
}
 
.image-container{ 
  display: flex;
  align-items: flex-start;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  border-radius: 4px;
  margin: 10px;
  position: relative; 
  overflow: hidden;  
 cursor: pointer;
} 

.image-container img {
  border-radius: 50%;
  max-width: 100%; 
  width: 40px;  
}


.text-container {
  display: flex; 
  align-self: center;
}

.content-text{ 
  color: grey; 
  margin-left: -2px;
}
.text-container p {
  font-size: 15px;
  line-height: 1.5;
  margin-left: 8px ; 
  margin-top: -2px;
}

.material-symbols-outlined {
  font-size: 1px;
  margin-left: auto; 
  font-weight: 100;  
  color: rgb(47, 51, 54); 
  margin-bottom: 5px;
}

.mainbody{ 
display: inline;  
border-right: 1px solid rgb(47, 51, 54);
width: 700px; 
height: 100%;

} 

.home-container{ 
border-bottom: 1px solid rgb(47, 51, 54);
height: 105px;
}
.home-container .heading{  
display: flex;
margin-left: 17px;  
margin-top: 15px;
font-weight: 500; 
font-size: large; 
cursor: pointer; 
} 

.home-container .explore{ 
display: flex;
margin-left: 175px ; 
justify-content: space-between; 
color: gray; 
font-weight: 500; 
margin-top:35px ;  
cursor: pointer; 
} 

.home-container .following{ 
  margin-right: 175px; 
  cursor: pointer;
} 

.mind {  
  display: flex;
  align-items: flex-start;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  border-radius: 4px;
  margin: 10px;
  position: relative; 
  overflow: hidden;  
 cursor: pointer;
  
}  
 
.post-tag{ 
border-bottom: 1px  solid rgb(47, 51, 54); 
height: 120px;
}
.mind img{ 
  border-radius: 50%; 
  width: 40px; 
}

.mind .post{  
  margin-left: 15px; 
  margin-top: 1px;
  color: gray; 
  font-size: larger; 
  font-weight: 300;
} 

.button-menu{  
  display: inline-block;
  justify-content: space-between;
}

.button-tag { 
  margin-left: 45px;
  margin-top: 20px;  
  }
  
  .button-tag a {
    text-decoration: none;  
  }
  
  .button-tag button {
    background-color: #1DA1F2; 
    color: #fff; 
    font-size: 10px; 
    padding: 5px 15px; 
    border-radius: 50px; 
    margin-left: 310px;
    border: none;  
    cursor: pointer;  
    font-size: 15px; 
    font-weight: 700;
  }  
  
  .show p{  
  border-bottom: 1px solid rgb(47, 51, 54) ; 
  height: 35px; 
 color: #1DA1F2; 
padding-left: 275px;
} 
.image-profile img{  
  width: 45px; 
  height: 45px;
  margin-left: 20px; 
  margin-top: 5px; 
  border-radius: 50%;
} 

.text-post { 
    text-align: center;  
      display: flex;
      justify-content: center; 
      align-items: center;  
      font-size: medium; 
      font-weight: 400; 
      margin-top: -40px; 
      margin-left: 85px;
    }  
.image-profile{ 
border-bottom: 1px solid rgb(47, 51, 54);
}
  .picture-tag p{ 
    margin-left: 85px; 
    margin-top: -15px;
  }

.react-tag{  
  display: flex;
  justify-content: space-between; 
  align-items: center;  
  height: 50px; 
  padding: 0 12px; 
  position: sticky; 

} 

.search-bar {
  display: flex;
  align-items: center;
  background-color:rgb(47, 51, 54) ;
  padding: 8px 16px;
  width: 280px;  
  border-radius: 60px; 
  margin-left: 5px;
}

.search-bar i {
  margin-right: 10px; 
  background-color: rgb(47, 51, 54); 
  color: gray;
}

.search-bar input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 16px;
  color: #14171A;  
  }
.search-bar input {
  transition: color 0.2s;
}


.subscription-section {
  margin: 20px auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  max-width: 250px; 
  max-height: 250px; 
  border: 1px solid none ; 
  background-color: rgb(47, 51, 54); 
  border-radius: 60px;
}

.subscription-title {
  font-size: 20px;
  margin-bottom: 10px; 
  background-color: rgb(47, 51, 54); 
  font-weight: 600;
}

.subscription-description {
  font-size: 12px;
  margin-bottom: 20px; 
  background-color: rgb(47, 51, 54); 
  font-weight: 500;
}

.subscribe-button {
  background-color: #1DA1F2;
  padding: 7px 15px;
  font-size: 15px;
  border: none;
  cursor: pointer; 
  border-radius: 50px; 
  font-weight: 600; 
  margin-left: 6px;
}

.subscribe-button:hover {
  background-color: #0d91e3;
} 

.trending-now{
  margin: 20px auto;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  max-width: 250px; 
  max-height: 250px; 
  border: 1px solid none ; 
  background-color: rgb(47, 51, 54); 
  border-radius: 50px; 
  max-width: 250px; 
  max-height: 300px;
}

.trending-now h5{ 
  font-size: 15px;
  margin-bottom: 10px; 
  background-color: rgb(47, 51, 54); 
  font-weight: 600; 
  margin-left: 15px; 
  width: 120px;  
  margin-bottom: 15px;
}
 
.SA-trends { 
font-size: small; 
color: gray; 
background-color: rgb(47, 51, 54); 
margin-bottom: 0; 
margin-top: -5px;  
margin-left: 15px;  
margin-bottom: 7px; 
border: none;  

}  

.hashtags{ 
  background-color: rgb(47, 51, 54); 
  margin-left: 15px;  
  margin-top: -10px;
}
 
.twitter-footer span {
  font-size: 12px;
  font-weight: 500;
  margin-left: 40px;
  color: #606060;
  cursor: pointer; 
  display: block; 
}