html {
  height: 100%;
  margin: 0px; }

body {
  height: 100vh;
  width: 100%;
  margin: 0px;
  font-family: Goudy Old Style, serif;
  letter-spacing: 2px;
  background: #2e6850; }

.main-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/pattern_munnecos.jpg);
  background-size: 60% 60%; }

.chat-container {
  height: 100%;
  width: 1000px;
  overflow-y: auto;
  display: flex;
  align-items: center;
  flex-direction: column; }
  .chat-container .wrapper {
    padding: 30px 10px;
    height: 100%;
    width: 600px; }

.big-msg-box .avatar,
.small-msg-box .avatar {
  border-radius: 100px; }
.big-msg-box .wrapper,
.small-msg-box .wrapper {
  background-color: white;
  margin-left: 10px;
  border: 1px solid CRIMSON;
  line-height: 20px;
  float: right; }
.big-msg-box .username,
.small-msg-box .username {
  font-family: arial narrow, sans serif;
  color: CRIMSON;
  margin-bottom: 10px;
  display: inline-block; }
.big-msg-box .score,
.small-msg-box .score {
  font-family: arial narrow, sans serif;
  font-size: 12px;
  display: inline-block;
  float: right; }

.big-msg-box {
  width: 580px; }
  .big-msg-box .avatar {
    height: 170px;
    width: 170px;
    border: 15px solid CRIMSON; }
  .big-msg-box .wrapper {
    width: 400px;
    border-radius: 45px;
    padding: 25px; }

.small-msg-box {
  float: right;
  margin-top: 10px; }
  .small-msg-box .avatar {
    height: 90px;
    width: 90px;
    border: 10px solid CRIMSON; }
  .small-msg-box .wrapper {
    width: 310px;
    border-radius: 35px;
    padding: 22px; }
  .small-msg-box textarea {
    width: 250px; }
  .small-msg-box input {
    height: 22px; }
  .small-msg-box input,
  .small-msg-box textarea {
    margin-bottom: 10px;
    border: none;
    border-bottom: 1px solid CRIMSON; }
  .small-msg-box button {
    border-radius: 50px;
    background-color: CRIMSON;
    border: none;
    color: white;
    float: right; }
    .small-msg-box button:hover {
      cursor: pointer; }

.icon-star {
  color: #ffcc00;
  opacity: 0; }

.error {
  color: CRIMSON;
  font-weight: bolder;
  font-size: 14px;
  display: block;
  min-height: 20px; }
  .error::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: CRIMSON; }
  .error::-moz-placeholder {
    /* Firefox 19+ */
    color: CRIMSON; }
  .error:-ms-input-placeholder {
    /* IE 10+ */
    color: CRIMSON; }
  .error:-moz-placeholder {
    /* Firefox 18- */
    color: CRIMSON; }