*{box-sizing:border-box}body{font-family:Lato,sans-serif;margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#ffe9ef}h1{margin:0}.status{font-size:100px;left:50%;top:50%;color:#fed9e4;text-shadow:0 0 5px #fec8d8;margin-bottom:2rem}@media(min-width:768px){.status{font-size:200px;transform:translate(-50%,-50%) rotate(-90deg) translateY(-140px) translateY(-50%);position:absolute}}.chat{border-radius:15px;box-shadow:0 0 20px #e0bbe4;background:#fff;width:280px;height:250px;display:flex;justify-content:flex-end;flex-direction:column;overflow:hidden;position:relative;padding:0 15px}@media(min-width:768px){.chat{width:280px;height:400px}}.chat__header{position:absolute;top:0;left:0}.header{align-items:center;border-radius:15px 15px 0 0;background:#be71c7;color:#fff;display:flex;height:60px;padding:20px;width:100%;text-transform:uppercase;z-index:2;transform:translate(0)}.header__members{display:flex;align-items:center;padding-left:15px}.header__member{height:30px;width:30px;border-radius:100%;background:linear-gradient(25deg,gray,#fff);background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="25" fill="%23f6a5c0"/><rect x="11" y="14" width="28" height="22" rx="3" fill="%23fff"/><rect x="11" y="14" width="28" height="7" rx="3" fill="%23555"/><circle cx="15.5" cy="17.5" r="1.5" fill="%23fff"/><circle cx="20" cy="17.5" r="1.5" fill="%23fff"/><circle cx="24.5" cy="17.5" r="1.5" fill="%23fff"/></svg>');background-size:cover;margin-right:4px}.header__member--server{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="25" fill="%2378909c"/><rect x="12" y="12" width="26" height="8" rx="2" fill="%23fff"/><rect x="12" y="23" width="26" height="8" rx="2" fill="%23fff"/><rect x="12" y="34" width="26" height="8" rx="2" fill="%23fff"/><circle cx="16" cy="16" r="1.6" fill="%234caf50"/><circle cx="16" cy="27" r="1.6" fill="%234caf50"/><circle cx="16" cy="38" r="1.6" fill="%23e74c3c"/></svg>')}.message{display:none;flex:0 0 auto;margin-bottom:5px}.message--browser{justify-content:flex-start}.message--browser .message__content{background:#eee}.message--server{justify-content:flex-end}.message--server .message__content{background:#e0bbe4;color:#fff;justify-content:flex-end;text-align:right}.message__content{border-radius:15px;min-height:50px;align-items:center;display:inline-flex;background:#fff;padding:10px}.message--left{justify-content:center}.message--left .message__content{background:#fff;color:#ccc}.message--typing .message__content div{animation:wave .5s ease infinite;border-radius:100%;height:8px;width:8px;background:#b3b3b3;margin:2px}.message--typing .message__content div:nth-of-type(1){animation-delay:.1s}.message--typing .message__content div:nth-of-type(2){animation-delay:.2s}.message--typing .message__content div:nth-of-type(3){animation-delay:.3s}@keyframes wave{50%{transform:translateY(-150%)}}