@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("dark.css");

body {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-size: 125%;
    font-family: "Open Sans", sans-serif;
}

#chat_output {
    height: 20em;
    overflow: scroll;
}

input[type="text"] {
    font-size: 1em;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 0.3em;
    padding: 0.5em;

    &:focus {
        outline: var(--md-sys-color-primary) solid 2px;
    }
}

button {
    font-size: 1em;
    border: none;
    border-radius: 0.3em;
    padding: 0.5em;

    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);

    &:hover {
        background-color: color-mix(
            in srgb,
            var(--md-sys-color-secondary-container),
            var(--md-sys-color-on-secondary-container) 10%
        );
    }

    &[type="submit"] {
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);

        &:hover {
            background-color: color-mix(
                in srgb,
                var(--md-sys-color-primary-container),
                var(--md-sys-color-on-primary-container) 10%
            );
        }
    }
}

.modal_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.modal_window {
    padding: 1em;
    background-color: var(--md-sys-color-surface);
    border-radius: 0.3em;
}