body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #1f1f1f;
    display: flex;
    justify-content: center;
    margin: 0;
    width: 100%;
    height: 100vh;
    background:
        radial-gradient(ellipse at bottom, #e8e8e8, #d0d0d0);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

h1,
h2,
h3,
h4,
h5 {
    margin-top: 0px;
    margin-bottom: 0px;
}

h6 {
    margin-top: 0px;
    margin-bottom: 0.5rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.content-wrapper {
    width: 50%;
    display: block;
}

.header-wrapper {
    display: flex;
    align-items: end;
    height: calc(100vh * 0.1);
}

.chat-log-wrapper {
    display: flex;
    align-items: end;
    height: calc(100vh * 0.8);
}

.chat-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(100vh * 0.1);
}

.chat-log {
    width: 100%;
    height: 95%;
    font-size: x-large;
    border-width: 1px;
    border-style: solid;
    border-color: #313131;
    background-color: #b7b7b7;
    word-wrap: break-word;
    overflow-y: scroll;
    overflow-anchor: auto;
    scroll-behavior: smooth;
}

.chat-input-label {
    display: none;
}

.chat-input {
    width: 100%;
    height: 1.5rem;
    border-width: 1px;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    margin-right: 0%;
    background-color: #b7b7b7;
    font-size: medium;
    padding-top: 2px;
    padding-right: 3px;
    padding-left: 0.5rem;
}

.send-btn {
    margin: 0%;
    padding: 6px;
    border-width: 1px;
    border-color: #313131;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-color: #2ed195;

    :active {
        background-color: #2eb886;
    }
}

@media (max-width: 1024px) {
    .content-wrapper {
        width: 70%;
    }

    .chat-log {
        font-size: x-large;
    }

    .chat-input {
        font-size: larger;
    }
}

@media (max-width: 480px) {
    .content-wrapper {
        width: 90%;
    }

    .header-wrapper {
        height: calc(100vh * 0.06);
    }

    .chat-log-wrapper {
        height: calc(100vh * 0.84);
    }

    .chat-input-wrapper {
        height: calc(100vh * 0.1);
    }

    .chat-log {
        height: 98%;
        font-size: larger;
    }

    .chat-input {
        font-size: medium;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        color: rgb(202, 198, 191);
        background: radial-gradient(ellipse at bottom, #1d1f20, #191b1c);
        background-image: radial-gradient(at center bottom, rgb(23, 25, 26), rgb(20, 22, 22));
    }

    .chat-log {
        color: rgb(195, 190, 182);
        border-color: rgb(104, 97, 86);
        background-color: rgb(30, 32, 33);
    }

    .chat-input {
        color: rgb(202, 198, 191);
        border-color: rgb(61, 66, 69);
        background-color: rgb(37, 40, 42);
    }

    .send-btn {
        color: rgb(255, 255, 255);
        border-color: rgb(61, 66, 69);
    }

    ::-webkit-scrollbar {
        background-color: rgb(26, 28, 29);
        color: rgb(173, 166, 156);
    }

    ::-webkit-scrollbar-corner {
        background-color: #181a1b;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #454a4d;
    }
}