@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #ffffff;
        --background-color: #181819;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --text-color: #000000;
        --background-color: #ffffff;
    }
}

:root {
    color: var(--text-color);
    background-color: var(--background-color);
    font-family: sans-serif;
}

header {
    display: flex;
    justify-content: center;
}

header a {
    text-decoration: none;
    color: var(--text-color);
}

main {
    padding: 0px 2%;
}

.connected-amount {
    padding: 4px;
}

.message-list {
    height: 50%;
    border: 1px solid var(--text-color);
    padding: 20px;
    overflow-y: scroll;
}

.message {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--text-color);
}

.send-message-form {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--text-color);
}

.send-message-form > * {
    margin: 0px 5px;
}

.message-container {
    display: flex;
    flex-direction: column-reverse;
}

.message-content {
    line-break: anywhere;
}

.message-input {
    width: 90%;
}