html, body {
    height: 100%;
    margin: 0;
    background-color: #AE61A0;
}

body {
    font-family: 'Roboto', sans-serif;
    height: auto;
}

.main-box {
    display: flex;
    flex-direction: row;
    margin: 40px;
    border: black solid 4px;
    height: calc(100vh - 80px);
}





.left-box {
    flex: 3;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to right, #CDAEEA, #F1E1FE);
}

.top-box {
    background-image: linear-gradient(to bottom, #400B91, #9E78DA);
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 6px;
    border-bottom: #3F167C solid 2px;
}





.logo-box {
    position: absolute;
    width: 120px;
    height: 90px;
    top: 35px;
    left: 5px;
    transform: rotate(-5deg);
    background-color: white;
    border-radius: 50%;
    border: black solid 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.logo-box p {
    color: #5524A0;
    font-size: 40px;
    font-weight: bold;
}

.title-box {
    flex-grow: 1;
    margin-left: 100px;
}

.title-box h1 {
    color: white;
    margin: 0px;
    margin-top: 6px;
}

.options-box {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    gap: 10px;
}

.mail-box {
    width: 45px;
    height: 30px;
    background-color: #F0E7DF;
    border: #69584B solid 2px;
}

.buttons-box {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.btn {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #855A76;
    border: #6C3B5A solid 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-weight: bold;
    color: #B6B7B6;
}

.buttons-box #new {
    background-color: #51B7AF;
    color: white;
    border: #1C7B88 solid 2px;
}

.buttons-box #up {
    transform: rotate(90deg);
}

.buttons-box #down {
    transform: rotate(-90deg);
}





.people {
    height: 60px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 2px;
}

.people:nth-child(even) {
    background-image: linear-gradient(to right, #CDAEEA, #F1E1FE);
}

.people:nth-child(odd) {
    background-image: linear-gradient(to right, #955DD7, #D1C7F1);
}

.people#chosen {
    background-image: linear-gradient(to right, #43DFE3, #C2FCFF);
}

.pb-box {
    aspect-ratio: 1/1;
    background-color: white;
}

.info-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 10px;
    padding-top: 2px;
}

.info-box p {
    font-size: small;
    margin: 0px;
}

.info-box h3 {
    font-size: medium;
    font-weight: lighter;
    margin: 0px;
    margin-bottom: 4px;
}

.time-box {
    align-self: flex-end;
    padding-right: 16px;
    padding-bottom: 4px;
}





.right-box {
    flex: 5;
    background-image: linear-gradient(to right, #C2FCFF, #87E1E8);
    display: flex;
    flex-direction: column;
    border-left: #BBE5F5 solid 2px;
}

.messages-box {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
}

.avatar-box {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}




.avatar {
    display: flex;
    margin-top: 80px;
    width: 70%;
    border-radius: 50%;
    flex-grow: 1;
    background-color: grey;
    align-items: center;
    justify-content: center;
}

.avatar-name {
    font-weight: normal;
}





.actual-messages-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 30px;
}

.left-message, .right-message {
    max-width: 70%;
    padding: 10px 20px;
    border-radius: 10px;
    border: black solid 2px;
}

.left-message {
    align-self: flex-start;
    background-image: linear-gradient(to bottom, #DDF5F5, #B0EAEA);
}

.right-message {
    align-self: flex-end;
    background-image: linear-gradient(to bottom, #E3D7E9, #C9ABD6);
}

.left-message p, .right-message p {
    margin: 0px;
    padding: 0px;
}





.navigation-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 60px;
}

.cross-box {
    aspect-ratio: 1/1;
}

.cross-btn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #CD0000;
    color: white;
    font-weight: bold;
    text-align: center;
}

.scrollbar-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scrollbar {
    flex-grow: 1;
    width: 8px;
    background-color: #4E8C91;
    flex-grow: 1;
}

.scroll-thumb {
    background-color: #60BBD2;
    width: 20px;
    height: 30px;
    border-radius: 50%;
    border: black solid 2px;
}





.send-message-box {
    margin: 40px;
    padding: 15px 20px;
    border-radius: 20px;
    border: black solid 2px;
    background-color: white;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.write-text-box {
    flex-grow: 1;
    height: 100%;
    background-color: white;
    border: black solid 2px;
}

.smiley-box {
    width: 40px;
    aspect-ratio: 1/1;
}

.smiley {
    width: 100%;
    height: 100%;
    background-color: #FFD64E;
    border-radius: 50%;
    border: #D99700 solid 2px;
}