@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*{
    font-family: "Ubuntu Mono", serif;
    font-weight: 400;
    font-style: normal;
}
strong, b{
    font-weight: 700;
}

html,body{
    margin: unset;
    padding: unset;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: auto;
}

body{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
}

#main-wrapper{
    width: 60vw;
	height: 85vh;
}

#app-title{
    color: #fff;
    text-shadow: 0px 3px 5px #9a9a9a;
    text-align: center;
    margin-bottom: 50px
}
#msg-txt-field{
    resize: none;
	font-size: 25px;
}
#send-btn-container{
    width: 70px;
}
#send-btn{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: 25px;
}

#message-items-container{
    height:50vh;
    overflow: auto;
    display: flex;
    flex-flow: column-reverse;
}
#message-items-container:empty{
    align-items: center;
    justify-content: center;
}
#message-items-container:empty::before{
    content:"conversation box is currently empty...";
    font-size: 11px;
    font-style: italic;
    align-self: center;
    color:#858585;
}

.message-item{
    max-width: 85%;
    padding: 10px 10px;
    margin-bottom: 10px;
    border-radius: 15px;
}
.message-item.received{
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    align-self: start;
}
.message-item.sent{
    background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
    align-self: end;
}
.message-item .sender-name{
    font-style: italic;
	font-weight: bold;
    font-size: 25px;
    text-decoration: underline;
	text-underline-offset: 7px;
	text-decoration-thickness: 5px;
}
.message-item .message-content{
    font-size: 25px;
}