body {

  margin: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #222c48;
  color: white;
  align-items: center;
}
/*chats*/
#head-div {
  color: azure;
  background-color: #161e35;
  height: auto;
  padding-bottom: 20px;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.line {
    display: flex;
    flex-direction: row;
    height: 6vh;
    padding: 20px;
    width: 100%;
    margin-left: 20px;
}

#search-h1 {
    position: relative;
    left: 80vw;
    bottom: 13px;
    font-size: 300%;
}
#name-h1 {
    margin-left: 20px;
}


#line2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    width: 95%;
    height: 3vh;
}

#chats_list-ul {
    list-style: none;
    padding: 3px;
    margin: 0;
    gap: 20px;
    margin-top: -10px;
}
.chat {
    display: flex;
    justify-content: space-between;
    width: 98vw;
    height: 80px;
    color: azure;
    border: white solid 4px;
    padding: 8px;
    background-color: #242a3f;
    margin-top: 10px;
    
}

#create-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 7vw;
    top: 80vh;
    background-color: #0080ff;
    color: white;
    width: 128px;
    height: 128px;
    border-radius: 64px;
    font-size: 128px;
}

#pages_menu-div {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    left: 50vw;
    top: 90vh;
    width: 400px;
    height: 60px;
    border-radius: 96px;
    border: #ffffff solid 4px;
    padding: 16px;
    background-color: #4e639a;
    color: white;
    transform: translate(-50%, -50%);
    gap: 18px;
}

.pages_menu-button {
    width: 120px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 48px;
}


/* chat */
#back-h1 {
    margin-left: 20px;
}

#name_chat-h1 {
    position: relative;
    left: 18vw;
}
.other_message-div {
    margin: 20px;
    color: #ffffff;
    background-color: #43495a;
    border-radius: 16px;
    min-width: 10vw;
    max-width: 70vw;
    align-self: flex-start;
    border: #ffffff solid 1px;
    padding-left: 10px;
}
.my_message-div {
    margin: 20px;
    color: #ffffff;
    background-color: #43495a;
    border-radius: 16px;
    min-width: 10vw;
    max-width: 70vw;
    align-self: flex-end;
    border: #ffffff solid 1px;
    padding-left: 10px;
}

#input-div {
    position: fixed;
    width: 96vw;
    bottom: 1%;
}
#message-input {
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 100%;
}

/*settings */
#my_info-div {
    height: 300px;
    width: 100vw; 
    align-items: center;
    display: flex;
    flex-direction: column;
    background-color: #161e35;
}
#my_name-h1 {
    position: relative;
}
#my_info_l-div {
    display: flex; 
    flex-direction: row;
    position: relative;
    gap: 40px;
}
#settings-div {
display: flex;
flex-direction: column;
}

.setting-div {
    border-radius: 16px;
    border: #ffffff solid 4px;
    width: 30vw;
    margin: 50px;
    margin-bottom: 0px;
    padding-left: 20px;
    background-color: #43495a;
}

/* chat profile */
#chat_profile-div {
    width: 90vw;
    height: 88vh;
    margin: auto;
    padding: 32px;
    margin-top: 2.5vh;
    border-radius: 32px;
    background-color: #161e35;
}
#last-time-p {
    margin-left: 44vw;
    color: #6f6f6f;
}
#name_chat_profile-h1 {
    margin-left: 38.2vw;
}
.chat_profile_do-button {
    margin-right: 2%;
    width: 21vw;
}
#info-div {
    display: flex;
    width: 86vw;
    padding-left: 2vw;
    height: 58vh;
    background-color: #4a5471;
    border-radius: 20px;
    border: #ffffff solid 2px;
    flex-direction: column;
    gap: 50px;
}

/* search */
#choose-div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    width: 95%;
    height: 3vh;
}
#search_input-div {
    margin-top: 30px;
    width: 96vw;
    justify-content: center;
    align-items: center;
    margin-left: 80px ;
    

}

/* create group */
#create_group-div {
    width: 90vw;
    height: auto;
    margin: auto;
    margin-top: 20px;
    padding: 32px;
    margin-top: 2.5vh;
    border-radius: 32px;
    background-color: #161e35;
}


/* SG */
.SG_profile_do-button {
    margin-right: 2%;
    width: 32vw;
}


/* account_settings */
#avatar {
    margin-top: 10px;
    width: 160px; 
    height: 160px; 
    border-radius: 80px; 
    border: 5px solid #ffff;
}