@font-face {
	font-family: Schoolbell;
	src: url(/assets/fonts/Schoolbell-Regular.ttf);
}

body {
	background-color: black;
	color: white;
	text-align: center;
	font-family: Schoolbell;
	font-size: clamp(16px, 4vw, 18px);
}

a {
    color: white;
    text-decoration: none;
}

#loginmain {
	display: flex;
	flex-direction: column;
  justify-content: center;
	align-content: center;
	height: 100vh;
}

#loginform {
	display: flex;
	justify-content: center;
	align-content: center;
}

#loginform #theform {
	width: 200px;
	display: flex;
	flex-direction: column;
}

#loginform #theform input {
	font-family: Schoolbell;
	width: 150px;
	padding: 5px;
	margin-bottom: 6px;
}


#loginform #theform button#login {
	box-shadow: inset 0px 1px 0px 0px #9acc85;
	background: linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
	background-color: #74ad5a;
	border: 1px solid #3b6e22;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	padding: 6px 20px;
	text-decoration: none;
}

#loginform #theform button#login:hover {
	background: linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
	background-color: #68a54b;
}

#loginform #theform button#login:active {
	position: relative;
	top: 1px;
}

.error {
	color: red;
	margin-bottom:5px;
}

/* MOBILE */

@media (max-width: 768px) {
	body {
		font-size: 20px;
	}

	#loginmain {
		height: auto;
		min-height: 100vh;
		padding-top: 40px;
	}

	#logo img {
		height: 160px; /* bigger logo */
	}

	#loginform #theform {
		width: 80%;
		max-width: 300px;
	}

	#loginform #theform input {
		width: 80%;
		padding: 10px;
		font-size: 18px;
	}

	#loginform #theform button#login {
		font-size: 18px;
		padding: 10px 20px;
	}

	.error {
		font-size: 1.5rem;
	}
}