.wrapper {
  max-width:700px;
  margin: 0 auto;
}


.chat {
  margin: 0;
}

h1 {
  text-align: center;
}
p.desc {
  text-align: center;
}

input {
  border:1px solid black;
  border-bottom: 1px solid black !important;
  padding:20px;
  margin-bottom: 10px;
}

input[type=submit]:hover {
  background:rgb(225, 248, 15);
  color:rgb(0, 0, 0);
  width: 8%;
  float:right;
}

input[type=submit] {
  background:rgb(240, 57, 57);
  color:white;
  width: 8%;
  float:right;
}

#nameInput {
  width:10%;
  float:left;
}

#messageInput {
  width:80%;
  float:left;
}

.messages {
  max-height:500px;
  overflow:scroll;
  background:white;
  padding:20px;
  position: relative;
}

.messagesWrap {
  position: relative;
  min-height: 100px;
}
.messagesWrap:before {
  display: block;
  z-index: 10;
  content : '';
  width: 100%;
  height:100px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 97%,rgba(255,255,255,0) 100%); /* W3C */
}

.messages li {
  border-bottom:1px solid #ccc;
  padding-bottom: 10px;
  margin:10px 0;
}


.messages strong {
  margin-right: 10px;
  color:#d12028;
}



.carouselImg{
  background-color: rgba(0,0,0,0.5);
  height:350px;
  object-fit:cover;
  opacity:0.9;
  }

 .navbar{
height: 50px;
}

.container{
  margin-top:400px;
}