:root { --primay: black; --bg-primay: white; --link: #2a0b0b; text-align: center; } * { font-family: unset; } p { margin: 20px 0px; } button { &:hover:not(:disabled) { filter: brightness(120%); cursor: pointer; } &:disabled { filter: brightness(30%); cursor: default; } } body { margin: 0; } main { display: flex; flex-direction: column; height: calc(100vh - 40px); width: calc(100vw - 40px); justify-content: space-between; padding: 10px; .nickname { font-style: italic; } #container { min-height: 100%; max-height: 100%; display: flex; flex-grow: 1; #message-area { display: flex; flex-direction: column; flex-grow: 80; #messages-container { display: flex; flex-direction: column; flex-grow: 1; overflow-y: scroll; overflow-anchor: none; list-style: none; padding-inline-start: 0; max-width: 100%; overflow-wrap: break-word; .message { display: block; text-align: left; width: calc(100% - 2 * 5px); padding: 5px; white-space: pre-line; &:nth-child(even) { background-color: #f2f2f2; } > h2 { width: 100%; display: inline-flex; margin: 0; font-size: medium; justify-content: space-between; } } } #message-writing-area { display: flex; flex-direction: column; justify-content: center; #message-input { width: 80%; } } } #user-area { display: flex; flex-direction: column; flex-grow: 20; ol { overflow-y: scroll; max-height: 100%; > li:nth-of-type(even) { background-color: #f2f2f2; } } } } }