html,body,div,p,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,form,fieldset,caption,
table,tr,td,th,address,blockquote,img {
  margin:0;
  padding:0;
}

img, fieldset, object {
  border:none;
}

*, *:after, *:before {
  flex:1 0 auto; /* safari bugfix */
  box-sizing:border-box;
}

button, label {
  cursor:pointer;
  flex: 0;
}

html, body {
  height:100%;
}

hr {
  display:none;
}

body {
  line-height: 1.5;
  font-family: sans-serif;
  background: #345;
  color: #fff;
}

button, input, table, textarea, select {
  font: inherit;
}

code, raw {
  font-size: 1em;
}

select, img {
  max-width: 100%;
}

/******************* start !! **********************/

#chatarea
{
  padding: 0 1em;
  max-width: 40em;
  margin: auto;
}

.chat-post
{
  padding-top: .5em;
  animation: .25s fade;
  padding-bottom: 2em;
  margin-bottom: -2em;
  position: relative;
}

.chat-post > header
{
  opacity: .6;
  font-size: .8em;
}

.chat-post > div
{
  background: #234;
  border-radius: 4px;
  padding: 1em 1.5em;
}

.chat-post.user
{
  max-width: 30em;
  margin-left: auto;
}

.chat-post.user > div
{
  padding-bottom: 3em;
}
.chat-post select
{
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
}

select:disabled
{
  opacity: 50%;
}

@keyframes fade
{
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-fly
{
  from { opacity: 0; top: 3px; }
  to { opacity: 1; top: 0; }
}

.chat-post.reply > div > *
{
  animation: .5s fade-fly;
  position: relative;
}

.chat-post.reply > div
{
  background: #123;
}

main > footer
{
  flex-grow: 0;
  background: #222;
}

main
{
  display: flex;
  flex-direction: column;
  height: 100%;
}

main > div
{
  width: 100%;
  overflow: scroll;
  height: 1px;
}

main > footer
{
  text-align: center;
  padding: .25em 0;
  font-size: .6em;
}

button {
  border: 0;
  border-radius: 2px;
  padding: .25em 1em;
  color: inherit;
  background: #123;
  position:absolute;
  right: 1.5em;
  bottom: 2.5em;
}