@import url('https://fonts.googleapis.com/css2?

family=Loved+by+the+King&family=Montserrat:ital,wght@0,100..900;1,100..900&display=
swap');

* {
font-family: 'Montserrat';
font-size: 15px;
letter-spacing: 0px;
}
p {
margin: 0;
}
.broadcasterFill {
background: (255, 255, 255, 1);
}
.badges {
display: flex;
}
.badges img {
width: 16px;
margin-right: 5px;
}
.pronouns {
text-transform: uppercase;
}
.emote {
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
height: 28px;
}
.emote-only img {
height: 90px;
width: auto;
}
.main-container {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
justify-content: flex-end;
margin: -20px 10px;
box-sizing: border-box;
}
.message-wrap {
transform: scaleY(0);
transform-origin: bottom left;
animation: scaleIn 0.5s ease-out 0.2s forwards;
width: 100%;
}
/* MESSAGE BOX STYLES */
.message-row {
display: flex;
justify-content: center;
margin-bottom: 0px;
}
.message-box {
position: relative;
 display: flex;
width: fit-content;
max-width: 90%;
padding: 18px 18px;
background-color: #ff7aaf;
/* background: linear-gradient(to bottom, rgba(222, 82, 124, 1), rgba(255,
214, 224, 1)); */
color: white;
font-size: 15px;
font-weight: 600;
/* text-shadow: 0px 0px 6px white; */
border-radius: 16px;
border: none;
box-sizing: border-box;
border-top: 2px solid #c44d71;
justify-content: space-between;
z-index: 1;
}
.message-box__decor1 {
position: absolute;
bottom: -25px;
right: 8px;
margin-bottom: 0px;
margin-right: 0px;
z-index: 5;
animation: skyMove 2s ease-out forwards;
}
/* USER BOX STYLES */
.user-box {
display: flex;
position: relative;
top: 16px;
left: 0px;
z-index:3;
}
.icon-role {
min-width: 40px;
min-height: 35px;
display: flex;
background: linear-gradient(to bottom, rgba(255, 89, 155, 1), rgba(207, 33,
102, 1));
color: #fc99c2;
border-radius: 40px;
justify-content: center;
align-items: center;
margin-right: 2px;
position: relative;
z-index: 2;
}
.icon-role .subscriber {
min-width: 40px;
min-height: 35px;
display: flex;
background: linear-gradient(to bottom, rgba(255, 89, 155, 1), rgba(207, 33,
102, 1));
color: #fc99c2;
border-radius: 40px;
justify-content: center;
align-items: center;
 margin-right: 5px;
position: relative;
z-index: 2;
}
.icon-role__broadcaster {
min-width: 40px;
min-height: 35px;
display: flex;
background: linear-gradient(to bottom, rgba(255, 89, 155, 1), rgba(207, 33,
102, 1));
color: #fc99c2;
border-radius: 40px;
justify-content: center;
align-items: center;
margin-right: 5px;
position: relative;
z-index: 2;
}
.username {
padding: 8px 20px;
background: linear-gradient(to bottom, rgba(255, 89, 155, 1), rgba(207, 33,
102, 1));
border-radius: 40px;
display: flex;
color: #ffffff;
font-weight: 900;
align-items: center;
width: fit-content;
max-width: 80%;
transform-origin: bottom left;
}
.username__broadcaster {
padding: 8px 20px;
background: linear-gradient(to bottom, rgba(255, 89, 155, 1), rgba(207, 33,
102, 1));
border-radius: 40px;
display: flex;
color: #ffffff;
font-weight: 900;
align-items: center;
width: fit-content;
max-width: 80%;
transform-origin: bottom left;
}
.username .username-text {
overflow: hidden;
text-overflow: ellipsis;
}
.username .pronouns {
font-size: 12px;
}
.user-box__love-gerak {
margin-left: 4px;
margin-top:10px;
z-index: 5;
animation: rotateScaleSwing 2.5s ease infinite;
}
/* ALERT STYLING */
.alert-wrap {
 display: flex;
justify-content: center;
align-items: center;
border-radius: 16px;
overflow: hidden;
margin: 10px 10px 10px 0px;
padding: 5px;
transform: scaleY(0);
transform-origin: bottom right;
animation: scaleIn 0.5s ease 0.2s forwards;
width: 100%;
}
.alert-wrap .background {
position: absolute;
background-color: #ffc9e3; /*#f797ad;*/
left: auto;
right: auto;
z-index: -1;
}
.alert-message {
display: flex;
font-weight: 600;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
z-index: 3;
}
.alert-message .header {
display: flex;
align-items: center;
margin-bottom: 2px;
align-self: center;
padding: 5px;
z-index:5;
}
.alert-message .header .heart-bubble {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff0f6;
border-radius: 50px;
margin-right: 15px;
transform: scale(1.5);
animation: beat 1s ease-out infinite;
}
.alert-message > p {
color: white;
text-align: center;
margin: 2px
}
/* ANIMATION DECLARATIONS */
@keyframes scaleIn {
0% {
transform: scale(0);
}
60% {
 transform: scale(110%)
}
100% {
transform: scale(100%)
}
}
@keyframes swing {
0%, 100% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rotateScaleSwing {
0% {
transform: rotate(0deg) scale(1) translate(0, 0);
}
25% {
transform: rotate(-30deg) scale(1) translate(0, 0);
}
50% {
transform: rotate(0deg) scale(1.4) translate(0, 0);
}
75% {
transform: rotate(30deg) scale(1.4) translate(0, 0);
}
100% {
transform: rotate(0deg) scale(1) translate(0, 0);
}
}
@keyframes opacityUp {
0% {
opacity: 0%;
}
100% {
opacity: 100%;
}
}
@keyframes skyMove {
0% {
opacity: 0;
transform: translate(-16px, 0);
}
100% {
opacity: 100%;
transform: translate(0px, 0);
}
}
@keyframes beat {
0%{
opacity: 100;
transform: scale(1);
}
30% {
opacity: 100;
transform: scale(1.3);
}
100% {
opacity: 100;
transform: scale(1);
}