@media (max-width:700px)
{
	.row,
	.button
	{
		flex-flow: column;
		justify-content: center;
	}
	.message
	{
		min-width: calc(90vw - 2rem);
		margin: 1rem;
	}
	article
	{
		flex-flow: column;
	}
	.title-wrapper
	{
		flex-flow: column;
		align-items: center;
		gap: 1rem;
	}
	.header-right
	{
		width: 0;
		height: 0;
	}
}
@media (min-width:701px)
{
	.row,
	.button
	{
		flex-flow: column;
		justify-content: space-between;
	}
	.outer-wrapper,
	.message
	{
		margin: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.title-wrapper
	{
		flex-flow: row;
		align-items: center;
		gap: 3rem;
	}
	.header-right
	{
		width: var(--sidewidth);
		height: var(--sidewidth);
	}
}
:root
{
	--snowwhite: #fffafa;
	--orange: #ea963e;
	--grey: #D9D9D9;
	--black: #000000;
	--primaryFont: Arial, system-ui, -apple-system, sans-serif;
	--middlewidth: 404px;
	--sidewidth: 112px;
	--logosize: 112px;
}

*
{
	font-family: var(--primaryFont);
	background-color: var(--snowwhite);
}

body
{
	background-color: #808080;
	font-weight: bold;
}
main,
article,
section
{
	display: flex;
	justify-content: center;
	align-content: center;
}
.outer-wrapper
{
	display: flex;
	flex-flow: column;
	align-items: center;
}
.title-wrapper
{
	display: flex;

}
img
{
	width: var(--logosize);
	height: var(--logosize);
	border-radius: 50%;
	background-color: var(--grey);
	border: none;
}
.header-left
{
	width: var(--sidewidth);
	height: var(--sidewidth);
}
.header-middle
{
	width: var(--middlewidth);
}
p.title
{
	text-align: center;
	margin: 0 0 1rem 0;
}
p.smalltitle
{
	text-align: start;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 700;
	line-height: 27.6px;
	font-family: var(--primaryFont);
	padding: 0;
	margin: 0 0 .3rem 0;
}
.input-wrapper,
.message
{
	background-color: var(--snowwhite);
	padding: 2rem;
	/* border-radius: 5px; */
	display: flex;
	flex-flow: column;

}
.message
{
	display: none;
	background-color: #80ff80;
	text-align: center;
}
form
{
	display: flex;
	flex-flow: column;
	justify-content: center;
}
input
{
	background-color: var(--grey);
	border: none;
	border-radius: 7px;
	font-size: 20px;
}
input[type=text],
input[type=email]
{
	width: var(--middlewidth);
	height: 34px;
}
input[type=text]:active,
input[type=email]:active
{
	border-color: var(--orange);
}
label
{
	font-family: var(--primaryFont);
	font-weight: 400;
	font-size: 16px;
	line-height: 18.4px;
	height: 32px;
}
.label-lower
{
	position: relative;
	top: 10px;
	background-color: transparent;
}
p.text
{
	font-family: var(--primaryFont);
	font-weight: 400;
	font-size: 16px;
	line-height: 18.4px;
	height: 32px;
	margin: 0;
}
button
{
	border: none;
	border-radius: 7px;
	padding: .5rem;
	font-weight: 400;
	font-family: var(--primaryFont);
	font-size: 20px;
	line-height: 23px;
	background-color: var(--orange);
	color: var(--snowwhite);
	width: var(--middlewidth);
}
button:disabled
{
	background-color: #adaaaa;
}
.row,
.button
{
	display: flex;
	margin: 1px auto;
}
.row:nth-child(3)
{
	margin: 2rem auto;
}
.button
{
	justify-content: center;
}
.error
{
	background-color: #ff8080;
}
.info-text
{
	font-weight: 400;
	font-size: 12px;
	line-height: 14.52px;
	width: var(--middlewidth);
	margin-top: 3rem;
}