/* body {
    background-color: rgb(4, 1, 29);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
} */

.container {
    display: grid;
    grid-template-columns: 1fr max-content;
    width: 50rem;
    margin: 0 auto;
    margin-top: 1rem;
    gap: 1rem;
    border-right: 2px solid rgb(114, 114, 114);
    border-left: 2px solid rgb(114, 114, 114);
    border-bottom: 2px solid rgb(114, 114, 114);
    border-top: 2px solid rgb(114, 114, 114);
    border-radius: 5px;
    padding: 0.4rem;

}

input,
select,
button {
    background: #38373a;
    color: #ffffff;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border: 1px solid rgb(114, 114, 114);
}

span,
p {
    color: rgb(251, 251, 251);
}

@media (max-width: 50rem) {
    div.container {
        display: flex;
        flex-direction: column;
        width: 80%;
    }

    div.container>* {
        margin: 1rem 0.2rem;
    }
}