body { margin: 0; padding: 0; background-color: #134115; font-family: monospace; } div { box-sizing: border-box; } .container { display: flex; flex-direction: column; height: 100vh; } .messages { padding: 1em; display: flex; flex-direction: column-reverse; flex-grow: 1; overflow: auto; position: relative; } .messages .message { padding: 1em 1.25em; border: 1px solid #020a03; border-radius: 5px; margin-bottom: 0.75em; background-color: #fffefc; font-family: monospace; font-size: 14px; color: #0c0b09; } .chatter { font-weight: bold; } .chat-input { width: 100%; box-sizing: border-box; border-top: 1px solid #ccc; padding: 1em; background-color: #f4efe6; align-self: flex-end; } .chat-input > form { display: flex; width: 100%; box-sizing: border-box; } .chat-input > form > input, .chat-input > form > submit { padding: 1em 1.25em; margin-right: 1em; box-sizing: border-box; font-family: monospace !important; } .chat-input > form > input[type=submit] { background-color: #dacaae; border: 1px solid #010a02; border-radius: 5px; color: #0c0b09; font-weight: bold; padding: 0.75em 1em; margin-right: 0; } .chat-input > form > input[name="chatter"] { width: 20%; border: 1px solid #020a03; border-radius: 5px; color: #0c0b09; } .chat-input > form > input[name="message"] { width: 75%; border: 1px solid #020a03; border-radius: 5px; color: #0c0b09; } @media only screen and (max-width: 600px) { .chat-input { padding: 1em; } .chat-input > form { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; } .chat-input > form > input, .chat-input > form > submit { box-sizing: border-box; margin: 0.25em; font-size: 1em; padding: 0.75em 1em; border-radius: 0.25em; width: 100%; } .chat-input > form > input[name="chatter"] { width: 100%; order: 1; } .chat-input > form > input[name="message"] { width: 65%; order: 2; } .chat-input > form > input[type=submit] { width: 30%; order: 3; } }