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

family=Mina&display=swap);
* {
box-sizing: border-box;
}

:root{
--incerement-xlarge:1em;
--incerement-large:0.5em;
--incerement-small:0.2em;
--incerement-xsmall:0.1em;
--font-msg:2em;
--font-name:1em;

/* --color-primary:#303240; */
--color-primary:#222222;
--color-secondary:#ffffff;
--animation1: fit 0.4s cubic-bezier(.2,0,0,.99) forwards 0.3s;
--animation2: name 0.4s cubic-bezier(.2,0,0,.99) forwards 0.3s;
/* --color-primary:#FFFFFF;
--color-secondary:#505050; */

html, body {
height: 100%;
}

body {
font-family:'Mina';
font-size:2em;
line-height: 100%;
color:white;
}

.container{
margin-right: auto;
margin-right: 0;
}

.msg {
padding: 0.75em var(--incerement-large);
animation: fade .5s ease forwards;
-webkit-animation: fade .5s ease forwards;
}

@keyframes fade {
0% {opacity: 0;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);}
100% {opacity: 1;
-webkit-transform: none;
transform: none;}
}

#log{
z-index:1;
padding:var(--incerement-large);
 display:flex;
position: absolute;
bottom: 0;
left: 0;
flex-direction:column;
align-content:start;
width:100%;
}

#log .emote {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 0rem 0.05rem;
position: relative;
}

#log .emote img {

display: inline-block;
height: 1em;
opacity: 0;
}

#log .meta {
padding: var(--incerement-large) 0px var(--incerement-large) var(--incerement-
small);

.name-container{
align-items:flex-end;
z-index:2;
display:flex;
word-wrap: break-word;
flex-direction:row;
justify-content: space-between;
}
.msg-container{
padding: 0.5em 1em;
width:100%;
display:inline-block;
background-color:rgba(37, 38, 53, 1);
border-radius: 16px 16px 0px 16px;
color:#ffffff;
box-shadow: 0px 0px 2px, 0px 0px 10px;
border: 2px solid #FF69A7;
}
.box{
display:flex;
justify-content:flex-end;
}

.badges {
height:100%;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.badge.broadcaster-icon{
margin-left:var(--incerement-small);
margin-top:auto;
margin-bottom:auto;
width:0.6em;
}
.badge.premium-icon{
margin-left:var(--incerement-small);
margin-top:auto;
margin-bottom:auto;
width:0.6em;
}
.badge.subscriber-icon{
margin-left:var(--incerement-small);
margin-top:auto;
margin-bottom:auto;
width:0.6em;
}
.badge.type-icon {
margin-left: var(--incerement-small);
margin-top: auto;
margin-bottom: auto;
width: 0.6em;
}
.name {
letter-spacing: 0em;
display: flex;
align-items:center;
font-size:0.8em;
border-radius: 20px;
max-width:80%;
z-index:1;
color:white;
}

}
.message {
overflow: hidden;
word-wrap: break-word;
}
.seperator{
position:absolute;
display:flex;
flex-direction:column;
justify-content: flex-end;
height:0px;
}