button,
input,
textarea {
	margin: 1em;
	background: none;
	border: 1px solid;
	border-radius: 0.2em;
	font-size: 1rem;
}

button:hover {
	background: light-dark(#242424, #F6F5F4);
	color: light-dark(white, black);
}
button:disabled {
	background: light-dark(#F6F5F4, #242424);
	color: light-dark(black, white);
}

textarea {
    min-height: 10ch;
}

form button,
form input,
form textarea {
    margin-left: 0;
    margin-top: 0;
}

.form-message {
    font-weight: bold;
    color: orange;
}

.danger-zone {
    border: 1px solid;
    display: inline-block;
    border-radius: 1rem;
    background: light-dark(red, maroon);
    text-align: center;
    width: 30ch;
}
.danger-zone h3 {
    margin: 1rem;
    margin-bottom: 0rem;
}
.danger-zone button {
    background: light-dark(#F6F5F4, #242424);
	color: light-dark(black, white);
}
.danger-zone button:hover {
    background: light-dark(#242424, #F6F5F4);
	color: light-dark(white, black);
}

@media only screen and (min-width: 50ch) { /* For viewports over 50ch */
	textarea {
        min-width: 50ch;
    }
}
@media only screen and (max-width: 50ch) { /* For viewports under 50ch */
	textarea {
        min-width: 100%;
    }
}