.messages{display:flex;flex-direction:column}.message{border-radius:.5rem;padding:.25rem;margin-top:.25rem;margin-bottom:.25rem;display:inline-block;max-width:500px}.yours{align-items:flex-start}.yours .message{margin-right:25%;background-color:#eee;position:relative;padding:.25rem}.mine{align-items:flex-end}.mine .message{color:#fff;margin-left:25%;background:linear-gradient(to bottom,#00d0ea 0,#0085d1 100%);background-attachment:fixed;position:relative;padding:.25rem}.system{align:center}.system .message{margin-left:25%;margin-right:25%;background-color:#eee;position:relative;padding:.25rem}