.login {
	--border-width: calc(2 * var(--dpx));
}

.login input {
	background: var(--input-color);
	padding: 0.5em 0 0.5em 1em;
	font-size: calc(64 * var(--dpx));
	width: calc(660 * var(--dpx));
	text-align: center;
	outline: none;
	border: none;
	border: var(--border-width) solid var(--theme-color);
	margin: var(--border-width) 0;
	font-weight: bold;
	letter-spacing: 1em;
	border-radius: var(--full-rounded);
	box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--tw-shadow);
}

.login input::placeholder {
	color: var(--theme-text-color);
	opacity: 0.1;
}

body.login {
	min-height: 100vh;
	width: 100%;
	margin: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	background: var(--background);
	background-size: 120% 120%;
	transition: 0.4s;
	background-position: center center;
	background-attachment: fixed;
}

.login * {
	color: var(--theme-text-color);
	font-family: "Roboto", "Nunito", serif;
	font-optical-sizing: auto;
	font-size: calc(24 * var(--dpx));
}

.login p {
	font-size: calc(32 * var(--dpx));
	margin-bottom: calc(48 * var(--dpx));
	font-weight: bold;
	position: relative;
	text-align: center;
}

.login p span {
	position: absolute;
	width: 100%;
	top: 140%;
	left: 0;

	color: #f66;
	font-size: 1.2vw;
	font-weight: 400;
	text-align: center;
}

body.login > div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: space-between;
	padding: 8vh 0;
}

body.login > div > button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;

	background: var(--theme-text-color);
	color: #fff;
	opacity: 0.2;
	cursor: pointer;

	font-size: calc(34 * var(--dpx));
	font-weight: bold;

	padding: calc(30 * var(--dpx)) calc(20 * var(--dpx));
	margin-top: calc(128 * var(--scale-y));

	border: var(--border-width) solid transparent;
	border-radius: var(--full-rounded);

	transition: 0.3s;
	pointer-events: none;
}

.login button.active {
	background: rgba(0, 0, 0, 0.02);
	opacity: 1;
	/* border: var(--border-width) solid var(--theme-text-color); */
	color: var(--theme-text-color);
	font-weight: 500;
	pointer-events: all;
	opacity: 0.5;
	background: var(--theme-color);
	border: var(--border-width) solid var(--theme-color);
	outline: none;
	color: #fff;
}

body.login > div > button * {
	color: var(--theme-color);
	font-weight: bold;
	transition: 0.3s;
}

body.login > div > button:hover,
body.login > div > button:hover * {
	color: var(--theme-text-color);
}

body.login > div > button:hover {
	background: var(--theme-color);
}

body.login > div > button:focus {
	opacity: 1;
	background: var(--theme-color);
	border: var(--border-width) solid var(--theme-color);
	outline: none;
	color: #fff;
}

body.login.select-display {
	background-size: 100% 100%;
}

.login .noCenter {
	position: absolute;
	top: 0;
	gap: 4vh;
	margin-top: 8vh;
}

.login .noCenter p {
	margin: 0;
}

.login .displaysList {
	display: flex;
	flex-direction: column;
	gap: 1vw;
	margin: 2vw 0;
}

.login .displayButton * {
	color: var(--theme-color);
	margin: 0;
	pointer-events: none;
}

.login .displayButton {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.5vw;
	padding: 1.5vw 2vw;
	border-radius: 2vw;
	opacity: 0.9;
	border: none;
	background: #fff;
	color: var(--theme-color);
	text-align: start;
	min-width: 50vw;
}

.login .displayButton span {
	font-size: 1.4vw;
	font-weight: bold;
	width: 100%;
	opacity: 0.6;
	text-align: start;
}

.login .displaysList button:hover,
.login .displaysList button:hover *,
.login .displaysList button:focus,
.login .displaysList button:focus * {
	color: var(--theme-text-color);
	background: var(--theme-color);
	outline: none;
	opacity: 1;
}

body.login .logo {
	height: calc(120 * var(--dpx));
	object-fit: contain;
	margin-bottom: calc(50 * var(--dpx));
}

.login .loadingTransition {
	background-color: #fff;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1000000;
	top: 0;
	left: 0;
	margin: 0;
	pointer-events: none;
	display: none;
}