body {
    background: var(--bg);
    color: var(--fontColor);
    font-family: helvetica;
	margin: auto;
}
p {
	color: var(--boxText);
	font-family: "Source Sans 3";
	font-weight: 600;
	margin-top: 0px;
	margin-bottom: 0px;
}
input {
	background: var(--boxBg);
	color: var(--inputText);
	border-color: var(--inputOutline);
	border-width: 1px;
	border-style: solid;
	border-radius: calc(100 * (3vw / var(--defaultWidth)));
	font-family: "Source Sans 3";
	font-weight: 600;
}


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*Title Information*/

.title-background {
	background: var(--boxBg);
	border-color: var(--boxText);
	border-width: calc(100 * (1vw / var(--defaultWidth)));
	border-style: solid;
	border-radius: calc(100 * (32vw / var(--defaultWidth)));
	--title-background-height: 150px;
	height: var(--title-background-height);
	min-width: 686px;
	margin-top: 1em;
}
.title {
	font-family: "Montserrat";
	font-weight: bold;
	font-size: calc(var(--title-background-height) - 0.5em);
	text-align: center;
	line-height: var(--title-background-height);
	height: var(--title-background-height);
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*Login Group*/



.login-background {
	background: var(--subBoxBg);
	border-color: var(--boxText);
	border-width: calc(100 * (1px / var(--defaultWidth)));
	border-style: solid;
	border-radius: calc(100 * (64vw / var(--defaultWidth)));
	display: grid;
	margin-top: 35px;
	min-width: 420px;
}
.login-label {
	font-size: 4em;
	text-align: center;
}
.row-settings {
	margin-top: 10px;
}
.username-label {
	margin: 0px;
	float: left;
	text-align: right;
	font-size: 1.5em;
	padding: 10px 2% 10px 0px;
}
.username-input {
	height: calc(1.5em + 30px);
	margin: 0px;
	float: left;
}
.password-label {
	margin: 0px;
	float: left;
	text-align: right;
	font-size: 1.5em;
	padding: 10px 2% 10px 0px;
}
.password-input {
	height: calc(1.5em + 30px);
	margin: 0px;
	float: left;
}
.login-button {
	background: var(--buttonBg);
	color: var(--boxText);
	border-color: var(--boxText);
	border-width: calc(100 * (1px / var(--defaultWidth)));
	border-style: solid;
	border-radius: calc(100 * (3vw / var(--defaultWidth)));
	font-size: 2em;
	text-align: center;
	height: 2.5em;
	margin: 15px 17% 2px 17%;
}
.to-register-button {
	background: var(--subButtonBg);
	color: var(--inputOutline);
	border-color: var(--inputOutline);
	border-width: calc(100 * (1px / var(--defaultWidth)));
	border-style: solid;
	border-radius: calc(100 * (3vw / var(--defaultWidth)));
	font-size: 2em;
	text-align: center;
	height: 1.75em;
	margin: 0px 34%;
	padding-block: 5px;
	padding-inline: 10px;
	min-width: 140px;
}
.error-label-login {
	text-align: center;
	color: var(--boxTextR);
	font-size: 1.5em;
	margin: auto;
	margin-top: 15px;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*Register Group*/

.register-background {
	background: var(--subBoxBg);
	border-color: var(--boxText);
	border-width: calc(100 * (1px / var(--defaultWidth)));
	border-style: solid;
	border-radius: calc(100 * (64vw / var(--defaultWidth)));
	display: grid;
	margin-top: 35px;
	min-width: 282px;
}
.register-label {
	font-size: 4em;
	text-align: center;
}
.username-label-register {
	margin: 0px;
	float: left;
	text-align: right;
	font-size: 1.5em;
	padding: 10px 2% 10px 0px;
}
.username-input-register {
	height: calc(1.5em + 30px);
	margin: 0px;
	float: left;
}
.password-label-register {
	margin: 0px;
	float: left;
	text-align: right;
	font-size: 1.5em;
	padding: 10px 2% 10px 0px;
}
.password-input-register {
	height: calc(1.5em + 30px);
	margin: 0px;
	float: left;
}
.e-mail-label {
	margin: 0px;
	float: left;
	text-align: right;
	font-size: 1.5em;
	padding: 10px 2% 10px 0px;
}
.e-mail-input {
	height: calc(1.5em + 30px);
	margin: 0px;
	float: left;
}
.name-label {
	margin: 0px;
	float: left;
	text-align: right;
	font-size: 1.5em;
	padding: 10px 2% 10px 0px;
}
.name-input {
	height: calc(1.5em + 30px);
	margin: 0px;
	float: left;
}
.register-button {
	background: var(--buttonBg);
	color: var(--boxText);
	border-color: var(--boxText);
	border-width: calc(100 * (1px / var(--defaultWidth)));
	border-style: solid;
	border-radius: calc(100 * (3vw / var(--defaultWidth)));
	font-size: 2em;
	text-align: center;
	height: 2.5em;
	margin: 15px 17% 2px 17%;
}
.to-login-button {
	background: var(--subButtonBg);
	color: var(--inputOutline);
	border-color: var(--inputOutline);
	border-width: calc(100 * (1px / var(--defaultWidth)));
	border-style: solid;
	border-radius: calc(100 * (3vw / var(--defaultWidth)));
	font-size: 2em;
	text-align: center;
	height: 1.75em;
	margin: 0px 34%;
	padding-block: 5px;
	padding-inline: 10px;
	min-width: 94px;
}
.error-label-register {
	text-align: center;
	color: var(--boxTextR);
	font-size: 1.5em;
	margin: auto;
	margin-top: 15px;
}