chatbox { position: absolute; bottom: 200px; left: 100px; z-index: 100; flex-direction: column; width: 500px; font-family: Poppins; font-size: 13px; textentry { background-color: black; opacity: 0; color: white; padding: 15px; background-color: rgba( black, 0.5 ); font-size: 14px; flex-shrink: 0; flex-grow: 0; width: 100%; } .chat_canvas { flex-direction: column; align-items: flex-start; } &.open { textentry { opacity: 1; backdrop-filter: blur( 10px ); } } } chatentry { background-color: rgba( black, 0.7 ); margin-bottom: 5px; color: white; transition: all 0.1s ease-out; opacity: 1; max-height: 200px; flex-shrink: 0; flex-grow: 0; padding: 12px; padding-left: 45px; min-height: 47px; max-width: 100%; transform: scale( 1 ); backdrop-filter: blur( 5px ); &:intro { max-height: 0px; padding-top: 0; padding-bottom: 0; margin-bottom: 0; opacity: 0; transform: scale( 0 ); } &:outro { opacity: 0; transition: all 2s ease-out; } image { width: 32px; height: 32px; min-height: 32px; border-radius: 100px; position: absolute; left: 6px; top: 6px; } .name { padding-right: 20px; font-weight: 600; font-size: 14px; color: #c0fb2e; flex-shrink: 0; } .message { color: #ccc; font-size: 14px; flex-grow: 1; } &.noname .name { display: none; } &.noavatar image { display: none; } &.is-lobby { .name { color: #ff80f5; } } }