*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
   
}
body{
    font-family: 'Inter', sans-serif;
    font-family: 'Kenia', sans-serif;
}

.container{
    background-color: #F5F5F5;
}
/* !-------------------------------------------------------------------------- */
/* !                                  HEADER                                   */
/* !-------------------------------------------------------------------------- */
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;

}
.logo{
    display: flex;
    align-items: center;
}

.logo img{
    width: 60px;
    height: 60px;
}
.header ul{
    display: flex;
    list-style: none;
    gap: 2.5rem;
}
/* ?-------------------------------------------------------------------------- */
/* ?                                  NAVBAR                                   */
/* ?-------------------------------------------------------------------------- */

.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #20889F;
    color: white;

}
.navbar p{
     font-family: 'Kenia', sans-serif;
     font-size: 2rem;
     padding-left: 1rem;
}

.navbaryan{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbaryan p{
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.navbaryan img {
    width: 70px;
    height: 70px;
}
.navbar ul{
    display: flex;
    align-items: center;
    /* gap: 1.5rem; */
    list-style: none;
}
.navbar ul li{
    padding: 1rem;
}

/* *-------------------------------------------------------------------------- */
/* *                                   MAİN                                    */
/* *-------------------------------------------------------------------------- */


.main{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.left{
    /* border: 1px solid red; */
    width: 30%;
    background-color: white;
    margin-top: 2rem;
    margin-left: 25rem;
    box-shadow: 3px 3px 3px gray;
}
.left ul{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    list-style: none;
}
.left ul li{
    display: inline-block;
    padding: 1rem;
}
.ilk{
    background-color: #D2E7EC;
    border-radius: .5rem;
}

.main-part1{
    background-color: white;
    margin-top: 2rem;
    width: 60%;
    box-shadow: 3px 3px 3px gray;
    margin-left: 2rem;
    padding: 10px;
}

.Paticipants{
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid gray;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
    gap: 1rem;
    
}
.main-part1 h2 {
    color: #20889F;
    
  
}
.avatars{
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
}
.topFollower{
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
}
.newlist{
    width: 50%;
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
}
.newlist img{
    width: 40%;
    border: 12px solid rgba(32,136,159,0.8);
    border-radius: 1rem;
}
.writer{
    font-size: 12px;
    color:rgba(32,136,159,0.8) ;
}
.news{
    font-weight: 600;
}

.main-part2{
 
    background-color: white;
    margin-top: 2rem;
    width: 60%;
    box-shadow: 3px 3px 3px gray;
    margin-left: 2rem;
    padding: 10px;
}
.avatars img{
    width: 80px;
    height: 75px;
    border-radius: 50%;
    border: 2px solid black;
}
.avatars-p .name{
    font-size: 1.4rem;
}
.main-part2 h2{
    color: rgba(32,136,159,0.8);
}
.top-news{
    display: flex;
    flex-direction: column;
    padding: 20px;
    text-align: center;
}

.topnews-div{
    display: flex;
    text-align: center;
    gap: 1rem;
    padding: 1rem;
}
.top-news img{
    width: 100%;
    margin-bottom: 1rem;
}