.index-body {
	min-height: 100vh;
	height: 100%;
	background: linear-gradient(
		0deg,
		var(--bg-grad-a) 0%,
		var(--bg-grad-b) 50%,
		var(--bg-grad-c) 100%
	);
}

.index-footer {
	text-align: right;
	position: fixed;
	color:white;
	bottom: 15px;
	right: 15px;
}

.index-container {
	width: 40%;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.8);
	margin-top: 50px;
	border-radius: 20px;
	padding: 10px;
	text-align: center;
	position: relative;
}

.index-logo {
	object-fit: contain;
	width: 100%;
	display: block;
}

.index-message {
	font-size: 1.3em;
	font-weight: bold;
	width: 70%;
	margin: auto;
	padding: 10px;
	border-radius: 5px;
}

.index-message-small {
	font-size: 0.8em;
	font-weight: normal;
}

.index-warning {
	background-color: #ffe;
	color: #c90;
	border: 1px solid #c90;
	filter: drop-shadow(0px 2px 2px #c90);
}

.index-success {
	background-color: #efe;
	color: #0c0;
	border: 1px solid #0c0;
	filter: drop-shadow(0px 2px 2px #0c0);
}

.index-error {
	background-color: #fee;
	color: red;
	border: 1px solid red;
	filter: drop-shadow(0px 2px 2px red);
}

.register-error-message {
	font-size: 1em;
	width: 50%;
	display: none;
	margin-top: -15px;
	margin-bottom: 20px;
}

.register-error-outline {
	background-color: #fffafa;
	border: 1px solid red;
	filter: drop-shadow(0px 2px 2px red);
}

.register-valid-outline {
	background-color: #fafffa;
	border: 1px solid green;
	filter: drop-shadow(0px 2px 2px green);
}


.index-forgot-login-container {
	display: flex;
	width: 80%;
	margin: auto;
	margin-top: 50px;
}

.index-forgot, .index-login {
	width: 40%;
	margin: auto
}

.index-container a {
	text-decoration: none;
	color: var(--bg-grad-a);
	transition: 
		color var(--time-transition),
		filter var(--time-transition)
	;
}

.index-container a:hover {
	color: var(--bg-grad-b);
	filter: drop-shadow(0px 0px 2px white);
}

.index-container p {
	font-size: 1.3em;
}

.index-container hr {
	width: 60%;
	margin-top: 20px;
	margin-bottom: 20px;
	color: var(--bg-grad-a);
}

.index-form input {
	border-radius: 10px;
}

@media (max-width: 1280px) {
	.index-container {
		margin-top: 30px;
		width: 50%;
	}
	.index-form input {
		width: 80%;
	}
	.index-forgot-login-container {
		text-align: center;
		width: 100%;
	}
	.index-forgot input {
		width: 16px;
	}
	.index-container p {
		font-size: 1em;
	}
	.index-container h1 {
		font-size: 1.5em;
	}
}

@media (max-width: 720px) {
	.index-container {
		margin-top: 10px;
		width: 80%;
	}
	.index-form input {
		width: 100%;
	}
	.index-forgot {
		padding-top: 20px;
	}
	.index-forgot input {
		width: 16px;
	}
	.index-forgot-login-container {
		display: grid;
		margin-top: 10px;
	}
	.index-forgot, .index-login {
		width: 100%;
		margin: auto;
		margin-bottom: 20px;
	}
	.index-error {
		width: 90%;
	}
}

@media (max-width: 720px) and (max-height: 800px) {
	.index-footer {
		text-align: center;
		position: relative;
		margin: auto;
		margin-top: 30px;
		width: 100%;
		padding: 0px;
		right: 0px;
	}
}