style.css

body {
	background-color: #EBE7E1;
	font-size: 18px;
	padding: 1em;
}

h1 {
	margin-top: 0;
}

#page, #app {
  max-width: 480px;
  margin: 0 auto;
  font-family: sans-serif;
}

.message {
  padding: 0.75em; 
  margin-bottom: 1em; 
  overflow: auto;
  border-radius: 8px;
	break-inside: avoid;
}


.message {
  background:#F9FAF9;
  color: #000;
	box-shadow: rgba(99, 99, 99, 0.404) 1px 1px 5px -2px;
}

.message.me {
  background:#E1F6CA;
  color: #000;
}

.message .lines {
  word-wrap: break-word;
}

.message .media img,
.message .media video {
  max-width: 100%;
  height: auto;
}

.meta {
	margin-top: 5px;
  font-size: small;
  opacity: 0.5;
}

.meta .username,
.meta .timestamp {
	display: inline-block;
}
.meta .username {
	float: left;
}
.meta .timestamp {
	float: right;
}


.dateDivider {
	text-align: center;
	margin-bottom: 1em;;
}
.dateDivider .date {
	font-size: small;
	background-color: #c6c7e1;
	border-radius: 10px;
	padding: 3px 14px;
	display: inline-block;
}


ul.pagination {
  padding: 0;
  list-style: none;
}

.pagination li {
  display: inline-block;
}

.pagination .page-item,
button {
	padding: 4px 8px;
  margin: 2px;
	border: solid 1px #ccc;
	background: #eee;
	cursor: pointer;
}

.pagination .page-item:hover,
button:hover {
	background: #fff;
}

.pagination .active {
background: #f9f9f9;
}



.help {
	font-size: small;
}

@media print{
	.noprint{
		display:none;
	}
	.message {
		border: solid 1px #ccc;
		box-shadow: none;
	}
}