:root {
  color: #505050;
}

body {
  max-width: 1280px;
  margin: 0 auto;
}

header {
  background-color: #9de7e3;
  padding: 16px;
}
header h1 {
  text-align: center;
}

footer {
  background-color: #9de7e3;
  text-align: center;
  padding: 32px 0;
}
.flash {
  text-align: center;
  background-color: #66b0ac;
  color: #fff8c8;
  padding: 8px 0;
}

.messages {
  padding: 10px;
  list-style: none;
}

.message-body {
  padding: 0 10px;
  min-height: 400px;
  overflow-wrap: break-word;
  white-space: pre-line;
}

.message-item {
  box-sizing: border-box;
  border-radius: 10px;
  border: solid 2px #66b0ac;
  padding: 10px;
  background-color: #fff8c8;
  word-break: break-word;
}

.message-item-body {
  height: 5em;
  overflow: hidden;
  overflow-wrap: break-word;
  white-space: pre-line;
}

.message-action {
  display: flex;
  justify-content: center;
}

.login-action {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.login-name {
  padding: .5em 1em;
  line-height: normal;
  background-color: #c4ebe8;
}
.login-button {
  background-color: #10c0ff;
}
.logout-button {
  background-color: #ffa0a0;
}
.back-to-index {
  padding: 15px 0;
  text-align: center;
}

.created-field {
  text-align: right;
}

.create-form {
  margin-top: 80px;
  padding: 0 32px;
}

.create-form input {
  width: 60%;
}

.create-form textarea {
  width: 60%;
  height: 12em;
}

.create-form-button {
  width: 7em;
}