@font-face {
	font-family: "InterVariable";
	src: url("https://web-cdn.bsky.app/static/media/InterVariable.c504db5c06caaf7cdfba.woff2")
		format("woff2");
	font-style: normal;
	font-weight: 300 1000;
	font-display: swap;
}

body {
	padding: 2.5vh 10vw;
	background-color: rgb(30, 30, 30);
	color: white;
	margin: 0;
	height: 95vh;
	font-family: "InterVariable";
}

#container {
	border: 1px solid rgb(47, 51, 54);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}

#container img {
	width: 200px;
	height: 200px;
}

#container h1 {
	margin: 0;
	margin-top: 10px;
}

#pwease {
	margin: 0;
	margin-bottom: 15px;
	text-align: center;
}

#container form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

#container form input {
	font-size: 15px;
	border: 1px solid rgb(50, 50, 50);
	border-radius: 5px;
	background-color: rgb(40, 40, 40);
	color: white;
	padding: 8px 7px;
	width: 400px;
	box-sizing: border-box;
	margin: 3px auto;
	transition: all 0.2s ease-in-out;
}

#container form p {
	color: rgb(113, 118, 123);
	font-size: 13px;
	margin: 15px 0 0 0;
	text-align: center;
}

#container form input:hover {
	border: 1px solid rgb(70, 70, 70);
}

#container form input:focus {
	outline: none;
	border: 1px solid rgb(100, 0, 200);
}

.flash {
	color: red;
	font-size: 13px;
	margin: 15px 0 0 0;
}