/*Change 'Quicksand' to a font you like or leave it*/
font-family:Quicksand,Arial,sans-serif;
line-height:1.428571429;
}
.circle-you{
background-color:gray;
border-radius:1rem;
/*Change color to any you like to be the border of your image*/
border:2pxsolidwhite;
}
.circle-bot{
background-color:gray;
border-radius:1rem;
/*Change color to any you like to be the border of the bot's image*/
border:2pxsolidwhite;
}
.circle-botimg,
.circle-youimg{
border-radius:10%;
width:100%;
height:100%;
object-fit:cover;
}
.circle-you,.circle-bot{
/*You can set the size of the profile images here, but if you do, you have to also adjust the .text{padding-left: 90px} to a different number according to the width of the image which is right below here*/
width:135px;
height:175px;
}
.text{
/*Change this to move the message box further left or right depending on the size of your profile pic*/
padding-left:90px;
text-shadow:2px2px2pxrgb(0,0,0);
}
.textp{
margin-top:2px;
}
.username{
padding-left:10px;
font-size:22px;
font-weight:bold;
border-top:1pxsolidrgb(51,64,90);
padding:3px;
}
.message-body{
position:relative;
border-radius:1rem;
border:1pxsolidrgba(255,255,255,0.459);
border-radius:10px;
padding:10px;
padding-top:5px;
/*Message gradient background color - remove the line bellow if you don't want a background color or gradient*/