Transfer to git

css/chat.css

@@ -0,0 +1,102 @@
+* {
+    font-family: inherit;
+    box-sizing: inherit;
+    
+}
+
+html, body {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    --text-color: rgb(215, 215, 215);
+    font-family: monospace;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(28, 28, 28);
+    box-sizing: border-box;
+    margin: 0;
+}
+
+
+h1, h2, h3, h4, p {
+    text-align: center;
+    color: var(--text-color);
+}
+
+
+.chatbox > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 1em;
+    width: 400px;
+}
+
+.chatbox {
+    border-radius: 5px;
+    display: flex;
+    margin: 5em;
+    max-height: calc(100% - 5em * 2);
+    background-color: rgb(56, 56, 56);
+}
+
+.chatbox > div > div {
+    margin-bottom: 1em;
+    width: 100%;
+}
+
+.content {
+    background-color: rgb(28, 28, 28);
+    border-radius: 10px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.message {
+    margin: 0.5em;
+    border-bottom: 1px dashed gray;
+}
+
+input {
+    background-color: rgb(84, 84, 84);
+    border: 0;
+    color: var(--text-color);
+}
+
+button {
+    border: 0;
+    background-color: rgb(0, 0, 0);
+    color: var(--text-color);
+    flex-grow: 0;
+}
+
+.m_content {
+    text-align: right;
+}
+
+.username {
+    text-align: left;
+}
+
+.input > form {
+    display: flex;
+    gap: 1em;
+}
+
+.input > form > * {
+    flex-grow: 1;
+}
+
+.logout {
+    width: 100%;
+}
+
+.error {
+    font-weight: bold;
+    color: red;
+}