@font-face {
	font-family: 'OpenSans';
	src: url('/assets/opensans_regular_base.woff2');
}

BODY {
	background-image: linear-gradient(to bottom right, #222222, #555555);
	background-attachment: fixed;
	background-size: cover;
	font-size: 16px;
	font-family: opensans, tahoma, verdana, arial, helvetica, sans-serif;
	color: #999999;
}

FORM {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	width: 80%;
	margin: 10% 10% 2rem 10%;
}

.behuman {
	flex-grow: 1;
	width: 15rem;
}

.text {
	flex-grow: 1;
	width: calc(100% - 17rem);
	min-width: 15rem;
}

FORM .en, FORM .de, FORM .es {
	line-height: 1.4;
}

LABEL {
	margin: 0 2rem 0 0;
}

.interact {
	white-space: nowrap;
}

[lang="en"] #en, [lang="en"] .de, [lang="en"] .es,
[lang="de"] .en, [lang="de"] #de, [lang="de"] .es,
[lang="es"] .en, [lang="es"] .de, [lang="es"] #es {
	display: none;
}

[lang="en"] LABEL SPAN::before {
	content: 'Enter "I agr';
}
[lang="en"] LABEL SPAN::after {
	content: 'e"';
}

[lang="de"] LABEL SPAN::before {
	content: 'Geben Sie "Ich stimm';
}
[lang="de"] LABEL SPAN::after {
	content: ' zu" ein';
}

[lang="es"] LABEL SPAN::before {
	content: 'Inserta "Consi';
}
[lang="es"] LABEL SPAN::after {
	content: 'nto"';
}

A {
	color: #999999;
	text-decoration: none;
}

A:hover {
	color: #FFFFFF;
}

#confirm {
	width: 13em;
	margin: 0 0.5rem 0 0;
	padding: 0.5rem 0.25rem;
	border-width: 0px 0px 1px 0px;
	border-color: #CCCCCC;
	border-style: solid;
	border-radius: 0;
	background-color: #FFFFFF11;
	color: #CCCCCC;
}

#confirm:focus {
	border-color: #FFFFFF;
	color: #FFFFFF;
	outline-width: 0;
}

#submit {
	position: relative;
	top: 0.5rem;
	width: 2rem;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: #FFFFFF;
	font-size: 40px;
	opacity: 0.5;
	cursor: pointer;
}

#submit:hover, #submit:focus {
	opacity: 1;
}

#containerLanguage {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1rem;
	color: #FFFFFF;
	text-align: center;
}