killfeed { position: absolute; top: 100px; right: 100px; z-index: 100; flex-direction: column-reverse; width: 500px; font-family: Poppins; font-size: 15px; font-weight: 500; align-items: flex-end; } KillFeedEntry { //background-color: rgba( black, 0.8 ); margin-bottom: 5px; color: white; transition: all 0.2s ease-out; opacity: 1; flex-shrink: 0; flex-grow: 0; padding: 12px; height: 45px; position: relative; align-items: center; mix-blend-mode: lighten; &:intro { transform: scale( 2 ); padding-top: 0; padding-bottom: 0; margin-bottom: 0; height: 0; opacity: 0; } &:outro { top: -20px; opacity: 0; transform: scale( 1.1 ); transition: all 0.2s ease-in; } .icon { width: 100px; height: 100px; background-size: 100%; background-image-tint: red; } .left, .right { padding: 0 12px; color: #fc0; &.me { font-weight: bold; } } .method { opacity: 0.3; } .message { color: #ccc; font-size: 14px; // background-color: red; flex-grow: 1; } &.noname .name { display: none; } &.noavatar image { display: none; } }