html {
    font-family: "Inter", sans-serif;
    font-size: 32px;
}

body {
    margin: 0;
    padding: 0;
    background: #101010;
}

#chat {
    width: calc(100% - 1rem);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.chat-message {
    width: calc(100% - 2.7rem);
    margin: 0;
    padding: .5rem .8rem .5rem 2rem;

    display: flex;
    align-items: start;
    gap: .5rem;

    color: #f0f0f0;
    background: #202020;
    border-radius: .5rem;
    text-shadow: 0 0 1rem #f0f0f080;
}

.system-message {
    width: calc(100% - 1.5rem);
    margin: 0;
    padding: .5rem .8rem;

    display: flex;
    align-items: center;
    gap: .5rem;

    color: #909090;
    background: #202020;
    text-shadow: none;
    border-radius: .5rem;

    font-size: .8rem;
}

.chat-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    position: absolute;
    transform: translate(-2.3rem,-.7rem);
}

.chat-username {
    color: #b7fd49;
    color: var(--colour);
    text-shadow: 0 0 1rem #b7fd4980;
    text-shadow: 0 0 1rem var(--glow_colour);
    font-weight: bold;
}

.system-message .chat-username {
    color: #909090;
    text-shadow: inherit;
    font-weight: bold;
}

.chat-content {
    word-break: break-word;
}