body {
    margin: 0;
    padding-bottom: 3rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }

#form > button {
    padding: 0 1rem;
    margin: 0.25rem;
}

#messages {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#messages > li {
    padding: 0.5rem 1rem;
    border-bottom: none;
}

#messages > li:nth-child(odd) {
    background: #efefef;
}

.listitem-text {
    animation: slide 1s ease;
}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateX(50%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background: rgb(26, 26, 26);
        color: rgb(226, 226, 226)
    }

    button {
        background-color: rgb(58, 58, 58) !important;
    }

    input {
        background-color: rgb(58, 58, 58) !important;
        color: rgb(226, 226, 226) !important;
    }
    
    #messages > li:nth-child(odd) {
        background: rgb(58, 58, 58);
    }
}