* {
    font-family: SF Pro;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    
}

.chat-history {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 90%;
    overflow-y: scroll;
    border-bottom: 1px solid black;
    margin-top: 500px;
}

.enter-message input {
    width: 100%;
    height: 10%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 4rem;
    font-family: SF Pro;
}

.message p {
    margin: 0;
    line-height: 30px;
    font-size: 1rem;
    overflow-wrap: break-word;
}

.message .message-author {
    font-weight: bold;
}

.message {
    position: relative;
    top: 20px;
    margin: 0;
    left: 20px;
    line-height: 20px;
    background-color: rgb(199, 199, 199);
    border: 1px solid black;
    border-radius: 20px;
    width: max-content;
    padding: 10px;
    margin-top: 10px;
    max-width: 80%;
}


.me {
    background-color: rgb(59, 99, 209);
    color: white;
    left: 25px;
}

.message:hover {
    cursor: pointer;
    background-color: rgb(177, 177, 177);
}
.me:hover {
    cursor: pointer;
    background-color: rgb(36, 71, 167);
}

.message:last-of-type{
    margin-bottom: 100px;
}


.enter-username {
    width: 100%;
}

.enter-username input {
    width: 100%;
}