add CSS for chat

src/style.css

@@ -11,6 +11,7 @@ body {
 }
 
 #title {
+    margin-top: 1vh;
     width: 100%;
     display: flex;
     justify-content: center;
@@ -48,11 +49,15 @@ body {
     width: 100px;
     border-radius: 50%;
     background-color: white;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 #chat-button > img {
-    height: 90px;
-    width: 90px;
+    height: 60px;
+    width: 60px;
 }
 
 #chat {
@@ -64,9 +69,37 @@ body {
     right: 0;
 
     display: none;
+    padding: 1.5vh;
+    border-radius: 30px 0px 0px 0px; 
     background-color: white;
 }
 
+#messages {
+    height: 50vh;
+    padding: 0;
+    list-style: none;
+    overflow-y: scroll;
+    font-family: sans-serif;
+}
+
+#message-input {
+    padding: 1vh;
+    width: 20vw;
+}
+
+#send {
+    height: 30px;
+    margin-left: 5px;
+    transform: translateY(10px);
+}
+
+#close {
+    height: 30px;
+    margin-left: 5px;
+    transform: translateY(10px);
+}
+
+
 .swiper {
     width: 500px;
     height: 400px;
@@ -86,6 +119,7 @@ body {
 @media screen and (max-width: 1024px) {
 
     body {
+        overflow-y: hidden;
         background-image: url("./images/mobile-background.jpg");
     }
 
@@ -97,10 +131,36 @@ body {
         display: flex;
     }
 
+    #chat-button  {
+        height: 60px;
+        width: 60px;
+
+        bottom: 5vh;
+    }
+
+    #chat-button > img {
+        z-index: 9998;
+        height: 30px;
+        width: 30px;
+    }
+
     #chat {
         z-index: 9999;
         height: 100vh;
         width: 100vw;
+
+        border-radius: 0px 0px 0px 0px; 
+    } 
+
+    #messages {
+        padding-left: 5vw;
+        height: 80vh;
+        width: 95vw;
+    }
+
+    #message-input {
+        margin-left: 5vw;
+        width: 60vw;
     }
 
     .photo-container {