.form {
	width: 250px;
	max-width: 100%;
	text-transform: uppercase;
	margin: 1em auto;
}
.form--horizontal {
	width: 500px;
	display: flex;
	align-items: center;
	gap: 1.2em;
}

.form, 
.form__input,
.form__area,
.form__btn {
	font-family: inherit;
	font-size: 1em;
	transition: var(--transition);
}

.form__label {
	display: block;
	margin-top: 1em;
}
.form--horizontal .form__label,
.form--horizontal .form__area {
	width: 100%;
	flex-grow: 1;
	margin-top: 0;
}

.form__label-text {
	margin: 0;
}

.form__input {
	width: 100%;
	text-align: center;
	border-radius: var(--bd-radius);
	padding: 0.5em;
	border: 2px solid var(--main-color);
}
.form__input:focus,
.form__area:focus {
	outline: none;
	box-shadow: 0px 0px 10px var(--main-color);
}
.form--horizontal .form__input {
	text-align: left;
}

.form__area {
	width: 100%;
}

.form__btn {
	display: block;
	width: 100%;
	color: #fff;
	text-transform: uppercase;
	background-color: var(--main-color);
	border: none;
	border-radius: var(--bd-radius);
	padding: 0.65em 0.5em;
	margin-top: 1.3em;
}
.form--horizontal .form__btn {
	margin-top: 0;
}
.form__btn--red {
	background-color: var(--error);
}