html,
body {
    box-sizing: border-box;
}

*,
*::before,
*:after {
    box-sizing: inherit;
}

.container {
    max-width: 40em;
    margin: auto;
    padding: .25em;
}

.form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5em;

    &.processing {
        cursor: wait;

        label,
        input,
        textarea {
            cursor: inherit;
        }
    }

    &>label {
        text-align: right;
    }

    &>textarea {
        width: 100%;
        min-height: 8em;
        max-height: 30em;
        resize: vertical;
    }
}

.fullwidth {
    grid-column: span 2;
}

.second-col {
    grid-column: 2;
}

.center {
    text-align: center;
}

input,
textarea,
button,
.button {
    border-style: solid;
    border-width: 2px;
}

input[type="button"],
input[type="submit"],
button,
.button {
    cursor: pointer;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input,
textarea,
button,
.button {
    padding: 5px 10px;

    &:disabled,
    &[disabled] {
        cursor: not-allowed;
    }
}

body label {
    padding: 5px 0px;
}

input,
textarea,
button,
.button {
    border-radius: 2px;
}

@media screen and (max-width: 400px) {
    .form {
        grid-template-columns: 1fr;

        &>label {
            text-align: initial;
        }
    }

    .fullwidth {
        grid-column: span 1;
    }

    .second-col {
        grid-column: 1;
    }
}