port over all static code

index.css

@@ -0,0 +1,94 @@
+:root,
+input,
+button {
+    font-family: sans-serif;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100vh;
+
+}
+
+#form {
+    background: rgba(0, 0, 0, 0.15);
+    padding: 0.25rem;
+    box-sizing: border-box;
+    backdrop-filter: blur(10px);
+    position: sticky;
+    bottom: 0;
+}
+
+.inner-form {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+#input {
+    border: none;
+    padding: 0 1rem;
+    border-radius: 0.3rem;
+    margin: 0.25rem;
+    height: 2rem;
+    flex-grow: 1;
+}
+
+#input:focus {
+    outline: none;
+}
+
+.inner-form>button {
+    background: #333;
+    border: none;
+    padding: 0 1rem;
+    margin: 0.25rem;
+    height: 2rem;
+    border-radius: 3px;
+    outline: none;
+    flex-grow: 1;
+}
+
+button, button a {
+    color: #fff;
+    text-decoration: none;
+}
+
+button a {
+    width: 100%;
+    height: 2rem;
+    text-align: center;
+    line-height:2rem;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+#messages {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+#messages>li {
+    padding: 0.5rem 1rem;
+    white-space: pre-wrap;
+}
+#messages>li>li {
+    margin: 0;
+    line-height: 1em;
+    height: 1em;
+    padding-bottom: 0.1em; 
+    overflow: hidden;
+}
+
+
+#messages>li>li>img {
+    height: 1.1em;
+}
+
+#messages>li:nth-child(odd) {
+    background: #efefef;
+}