@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css');
@import url('https://fonts.googleapis.com/css?family={{fontName}}');
@import url('https://fonts.googleapis.com/css2?family=Croissant+One&display=swap');

* {
    font-family: "Croissant One", serif;
    overflow: hidden;
}

.main-container{
    display:{{alignMessages}};
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-start;
    height:98%;
    margin-bottom:10px;
    box-sizing: border-box;
}

.message-row{
    flex: 0 0 auto;
    width:100%;
    margin-bottom:23px;
    vertical-align: baseline;
  	transition:1s;
  	animation: flipWolf 1s ease forwards, fluidinho 0.5s ease forwards;
}

.badge{
    display:none;
    height:{{fontSize}}px;
}

.user-box{
    display:inline;
    font-size:30px;
  	color:white;
  	position:relative;
  	left: 45px;
}

.user-box > span{
    font-size:{{fontSize}}px;
}

.background-user{
  display:flex;
}

.user-message{
  	position:relative;
    font-size:{{fontSize}}px;
    word-wrap: break-word;
  	height:auto;
  	overflow:hidden;
  	max-width:600px;
  	text-align: center;
}

.background-message{
  	display:inline-block;
  	background-image: url(https://i.ibb.co/mRvXxG7/Asset-3.png);
    background-position: center center;
  	background-repeat: no-repeat;
    background-size: cover;
	padding:8px;
  	margin-top:10px;
  	word-wrap: break-word;
  	color:white;
  	min-width:600px;
  	position:relative;
    overflow:hidden;
}	

.emote{
    height: {emoteSize}px;
    vertical-align: middle;
    background-repeat:no-repeat;
}

.action{
    font-style: italic;
}

.badges-Default-Message{
  position:relative;
  width:30px;
  left:22px;
}

.cilculo{
  	position:relative;
  	top:23px;
  	left:34px;
    width:6px;
    height:6px;
    background-color:white;
    transform: rotate(50deg);
}

@keyframes fluidinho {
  0%{
    margin-bottom: -7em;
  }
  100%{
    margin-bottom:5px;
  }
}

@keyframes flipWolf{
  0%{
    transform: scale(0);
  }

  100%{
    transform: scale(1);
  }
}


.streamer-message .badges-Default-Message{
  	width:60px;
  	left:3px;
}

.streamer-message .user-box {
  	left:10px;
}

.streamer-message .cilculo{
	left:1px;
}

.subscriber-message .background-message{
  	background-image: url(https://i.ibb.co/XZPHm3dV/Ativo-2.png);
}

.moderator-message .background-message{
  	background-image: url(https://i.ibb.co/7tc46WNW/Ativo-5.png);
}