changed chatroom css

app/assets/stylesheets/pages/_messages.scss

@@ -1,19 +1,27 @@
 .messages-container-container {
-  background-color: $light-gray;
+  background-color: $card-background;
   width: 100%;
   height: 100vh;
   position: relative;
+  margin-left: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .chat {
     position: absolute;
-    bottom: 0px;
+    bottom: 100px;
+    width: 90%;
   }
 }
 
 #messages-container {
   overflow: scroll;
   overflow-x: hidden;
-  height: 95%;
-  padding: 10px;
+  height: 81%;
+  padding: 38px;
+  width: 90%;
+  border-radius: 15px;
+  background-color: $light-gray;
 }
 
 select:not([multiple]) {
@@ -33,6 +41,7 @@ select:not([multiple]) {
 .avatar-sm {
   width: 35px;
   height: 35px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
 }
 
 .messageDiv {
@@ -46,9 +55,9 @@ select:not([multiple]) {
     padding-bottom: 2px;
     padding-left: 8px;
     padding-right: 8px;
-    background-color: #d4d5d6;
+    background-color: #f9bab3;
     color: $navbar-background;
-    border-radius: 2px;
+    border-radius: 10px;
   }
 
   &.right {
@@ -64,3 +73,31 @@ select:not([multiple]) {
 .margin-left {
   margin-left: 10px;
 }
+
+.text-center {
+  text-align: center;
+}
+
+.hover-notice {
+  display: flex;
+  justify-content: center;
+}
+
+.input-transparent {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.send-button {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: gray;
+  &:focus {
+    box-shadow: none;
+  }
+}