styles.css

html, body {
     margin: 0 auto;
     font-family: Arial, Helvetica, sans-serif;
     color: #fff;
     background: #36393f;
}

html {
     width: 100%;
     height: 100%;
}

body {
     width: 100%;
     padding-top: 1.25rem;
}

.mention {
    border-radius: 3px;
    font-weight: 500;
    color: #7289da;
    padding: 2px 3px;
    background: rgba(114,137,218,.1);
}

.timestamp {
     color: #72767d;
     position: relative;
     margin-left: 10px;
     font-size: 0.75rem;
     text-align: center;
     bottom: 5px;
}

.nick {
     position: relative;
     font-size: 1rem;
     bottom: 5px;
}

.avatar {
     position: relative;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     bottom: 10px;
}

.message {
     margin-top: 2rem;
     margin-left: 2rem;
     display: flex;
     width: calc(100% - 2rem);
     display: flex;
     flex-direction: row;
}

.right {
     margin-left: 18px;
     place-items: center;
}

.messageContent {
     font-size: 1.25rem;
     margin: 0;
     padding: 0;
     border: 0;
}

.cube {
     position: absolute;

     width: 10px;
     height: 10px;
     background: #7289da;
     animation: spinner-wandering-cubes 1.8s ease-in-out infinite
}


#loader {
     height: 100%;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    background: #36393f;
    z-index: 999;
}

.emoji {
     object-fit: contain;
     width: 1.375em;
     height: 1.375em;
     vertical-align: bottom;
     margin: 0;
     padding: 0;
     border: 0;
 }

@keyframes spinner-wandering-cubes{25%{-webkit-transform:translateX(22px) rotate(-90deg) scale(.5);transform:translateX(22px) rotate(-90deg) scale(.5)}50%{-webkit-transform:translateX(22px) translateY(22px) rotate(-180deg);transform:translateX(22px) translateY(22px) rotate(-180deg)}75%{-webkit-transform:translateX(0) translateY(22px) rotate(-270deg) scale(.5);transform:translateX(0) translateY(22px) rotate(-270deg) scale(.5)}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes spinner-chasing-dots-rotate-1WX_VU{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}