*{
    margin: 0;
    padding:0;
    font-family: sans-serif;
    box-sizing: border-box;
}
.header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.link{
    color: black;
}
.link_dark{
    color: white;
}
body{
    height: 100vh;
    background-color: #f4e9fc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.body-dark{
    background-color: #4a3a67;
}

.container{
    width:650px;
    height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.4);
     background-color:#c8b3d9;
     
}
.container-dark{
    background-color:#1b132b ;
}
.img1{
    float: left;
    width: 50px;
    height: 60px;

}
.header h1{
    position: relative;
    left: 10px;
    padding: 15px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.logo2{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}
.logo2-dark{
    color: white;
}
.all_icon{
    display: flex;
    flex-direction: row;
    position: relative;
    padding-left: 30px;
    color: black;
}
.all_icon_dark{
    color: white;
}
#iconmoon{
    position: absolute;
    bottom: 0px;
}
.body{
    flex: 1;
    background-color: rgb(230, 228, 235);
    padding: 40px 20px;
    background-image:url("chat/white\ background\ .jpeg");
    margin-top: 10px;
}
.bodyy-dark{
    background-image:url("dark.jpeg");
}

.body_dark{
    background-color: #4a3a67;
}
.message{
    background-color: #c9a4e8;
    padding: 20px;
    width: fit-content;
    border-radius: 20px;
    margin-bottom: 10px;
}
.message_dark{
    background-color: #4a3a67;
    color: white;
}
.user_message{
    margin-left: 380px;
    background-color: #9e7eb9;
    display: inline-block;
    width: 100%;
}
.user_message_dark{
   background-color: #2f1e51;
    color: white;
}
.footer form{
    display: flex;
     margin-top: 20px;
}
form input{
    flex: 1;
    height: 60px;
    border: none;
    outline: none;
    padding-left: 16px;
    width: 570px;
    font-size: 16px;
    Text-align: left;
    background-color:#c4aad8 ;
}
.input_dark{
    background-color: #1b132b;
}

form button{
    width: 70px;
    height: 60px;
    font-size: 16px;
   border: none;
    outline: none;
    background-color:#9e7eb9 ;
    cursor: pointer ;

}
.button_dark{
    background-color: #2f1e51;
}
form button:hover{
    transform:scale(1.1) ;
    background-color:#5e2f85 ;
    transition: 0.2s ease;
}
.first_message{
    display: flex;
    flex-direction: row;
    column-gap:5px  ;
    align-items: center;
}
.first_message i{
    font-size: 30px;
    margin-bottom:10px ;
    color: rgba(0,0,0,0.55);
}
.second_message{
    display: flex;
    flex-direction: row;
    column-gap:5px  ;
    align-items: center;
   
}

.header i{
    font-size: 30px;
    position: relative;
    left:15px;
  }
  .logo2 i{
    position: relative;
    right: 70px;
  }
 .icon{
   margin-right: 20px;
   margin-top: 10px;
 
   
 }
 form{
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 8px;
    background-color:#c4aad8 ;
}
.form_dark{
    background-color: #1b132b;
}
 .mic{
    font-size: 25px;
    color: rgba(0,0,0,0.55);

 }
 .mic_dark{
    color: white;
 }
   
 audio{
    margin-left: 280px;
    margin-top: 20px;
    background-color: #9e7eb9;
    
 }
 .oudio_dark{
    background-color:#2f1e51 ;
 }
 .input_message{
    font-size: 25px;
 }
 .button{
    font-size: 20px;
    color: black;
 }
 .button_dark{
    color: white;
 }
 .menu {
    position: absolute;
    top: 40px;
    right: -95px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: none;
   
  }
  .menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
  }
  
  .menu ul li {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
  }
 .menu ul li:hover{
    background-color: #9e7eb9;
 }
  
  .menu ul li a {
    text-decoration: none;
    color: #333;
  }