background color set

2019/Joca_van_der_Horst/index.html

@@ -23,7 +23,7 @@ Thank you!
     <div class="messages"></div>
     <div id="edge"></div>
     <form class="actions">
-      <input type="text" placeholder="press 'Enter' to send...">
+      <input type="text" placeholder="Hi Saint, please tell about...">
       <button type="submit">Send</button>
     </form>     
   </div>

2019/Joca_van_der_Horst/style.css

@@ -27,7 +27,7 @@
   
   .chat {
     width: 100%;
-    height: 90%;
+    height: 100%;
     max-height: calc(100%-2.5rem);
     position: fixed;
     left: 0;
@@ -53,7 +53,7 @@
     width: 79.89%;
     outline: 0;
     border: 0;
-    background-color: #EFEBE7;
+    background-color: #fff;
     padding: 0 1%;
     text-indent: 10px;
   }
@@ -104,6 +104,7 @@
   
   .messages .self {
     margin-left: auto;
+    color: black;
     background: #DDD;
     width: max-content;
     min-width: 30%;
@@ -115,8 +116,7 @@
     }
 
     .chat {
-        margin-top: 10%;
-        height: calc(90% - 60px);
+        height: calc(100% - 60px);
     }
     
     .messages div {
@@ -132,3 +132,49 @@
     }
     
   }
+
+  body {
+    width: 100wh;
+    height: 90vh;
+    background: linear-gradient(-45deg, #ffebd1, #e5eaf9, #fff);
+    background-size: 400% 400%;
+    -webkit-animation: Gradient 30s ease infinite;
+    -moz-animation: Gradient 30s ease infinite;
+    animation: Gradient 30s ease infinite;
+  }
+  
+  @-webkit-keyframes Gradient {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  
+  @-moz-keyframes Gradient {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  
+  @keyframes Gradient {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }