:root {
    --b-1: #11100E;
    --red-1: #4D242C;
    --red-2: #6F333B;
    --grayish: #3a3531;
    --whitish: #EAE9E5;
    --width: 80vw;
    --height: 85vh;
    --message-width: 30vw;
}
/* 
    Important info
s-me : is sender me class
s-myself : sender myself
s-i : sender i

*/
html {
    height: 90%;
}
body {
    background-color: var(--grayish);
    width: 100%;
    height: 100%;
}

.app-area {
    background-color: var(--b-1);
    margin: 2em auto 0 auto;
    width: var(--width);
    height: var(--height);
    border-radius: 10px;
}
/* //////////////// */
/*     Messages     */
/* //////////////// */

.messages{
    padding: 5vh 2vw 3vh 2vw;
    height: 90%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-color: var(--red-2) var(--red-1);
}
.message {
    color: var(--whitish);
    margin-top: 6vh;
}
.message-content {
    background-color: var(--red-1);
    color: var(--whitish);
    max-width: var(--message-width);
    word-wrap: break-word;
    padding-top: 5px;
    border-radius: 20px;
}
.s-me, .s-myself {
    justify-content: left;
    width: fit-content;
}

.s-i {
    margin-left: auto;

}


/* //////////////// */
/*   Message inputs */ 
/* //////////////// */

.message-input {
    height: 10%;
    padding: 2vw;
}
#message-content {
    background-color: var(--red-1);
    color: var(--whitish);
    border-color: var(--red-2)
}
#message-content::placeholder {
    opacity: 0.3;
    color: var(--whitish);
  }
#sender {
    background-color: var(--red-1);
    color: var(--whitish);
    border-color: var(--red-2);
}
#submit {
    background-color: var(--red-1);
    color: var(--whitish);
    border-color: var(--red-2)
}

/* //////////////// */
/*     Nav bar      */
/* //////////////// */

#navbarContent {
    width: var(--width);
}

#logout {
    border-color: var(--red-2);
    color: var(--red-2);
    background-color: var(--b-1);
}