.LoginContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(0deg, #000f, #0000);
	padding: 20px;
	border-radius: 5px;
}

.LoginInnerContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.LoginLogo{
	width: 500px;
	padding: 20px 0;
}

.LoginTextBox{
	font-size: 14pt;
	padding: 4px 12px;
	border: black solid 1px;
	outline: none;
	font-family: inherit;
	margin: 8px 0;
}

.LoginTextBox:focus{
	border: blue solid 1px;
}

.LoginButton{
	margin-top: 10px;
}

.LoginMessage{
	text-shadow: black 1px 1px;
	padding: 10px 0;
}

.LoginErrorMessage{
	text-shadow: black 1px 1px;
	padding: 10px 0;
	color: #d30000;
}

.LoginLinkContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.LoginNameTextBox{
	font-size: 14pt;
	font-family: inherit;
	outline: none;
	width: 230px;
	height: 30px;
}

.LoginPassword{
	border: black solid 1px;
	background-color: #fff;
	width: 230px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 2px;
}

.LoginPasswordTextBox{
	font-size: 14pt;
	font-family: inherit;
	outline: none;
	width: 230px;
	height: 30px;
}

.PasswordEye{
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	filter: invert(1);
	background-position: center;
	cursor: pointer;
}

.PasswordEye:hover{
	filter: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg">\
	<filter id="recolor" color-interpolation-filters="sRGB">\
	  <feColorMatrix type="matrix" values="\
		0 0 0 0 0.7\
		0 0 0 0 0\
		0 0 0 0 0\
		0 0 0 1 0\
	  "/>\
	</filter>\
  </svg>\
  #recolor');
}

/* return */

.LoginReturnContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(0deg, #000f, #0000);
	padding: 20px;
	border-radius: 5px;
}

.LoginReturnText{
	
}

/* register */

.RegisterContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	background-image: linear-gradient(0deg, #000f, #0000);
	padding: 20px;
	border-radius: 5px;
}

.RegisterTitle{
	font-size: 18pt;
	margin: 40px auto;
	width: fit-content;
}

.RegisterUserButton{
	width: fit-content;
	cursor: pointer;
	margin: 10px auto;
}

.RegisterMessage{
	text-shadow: black 1px 1px;
	padding: 10px 0;
	color: #d30000;
	max-width: 450px;
	text-align: center;
}

.RegisterItem{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.RegisterItemInner{
	display: flex;
}

.RegisterItemInfo{
	margin-bottom: 10px;
}

.RegisterTextBox{
	font-size: 14pt;
	margin: 4px 0;
	margin-left: auto;
	padding: 4px 12px;
	border: black solid 1px;
	outline: none;
	font-family: inherit;
}

.RegisterTextBox:focus{
	border: blue solid 1px;
}

.VerifyInfo{
	width: fit-content;
	margin: 0 auto;
	color: deeppink;
	display: none;
}

.GenderRadio{
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 14px;
	width: 20px;
	height: 20px;
}

.UsernameIcon{
	width: 36px;
	height: 36px;
}

.RegisterCountrySelect{
	font-size: 14pt;
	border: black solid 1px;
	padding: 4px;
	width: 50%;
	margin: 4px 0;
	outline: none;
	font-family: inherit;
}

.RegisterCountrySelect:focus{
	border: blue solid 1px;
}

.RegisterButton{
	align-self: center;
}

.NewPassword{
	width: 200px;
}

/* forgot password */

.ForgotPasswordContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(0deg, #000f, #0000);
	padding: 20px;
	border-radius: 5px;
}

.ForgotPasswordButton{
	margin-top: 14px;
	margin-bottom: 24px;
}

/* reset password */

.PasswordResetContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(0deg, #000f, #0000);
	padding: 20px;
	border-radius: 5px;
}

.PasswordResetInnerContainer{
	margin: 8px 0px;
}

/* code */

.CodeContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(0deg, #000f, #0000);
	padding: 20px;
	border-radius: 5px;
}

.CodeInnerContainer{
	/*
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	*/
}

.CodeTextTitle{
	font-size: 18pt;
	margin: 0 auto;
	width: fit-content;
}

.CodeText{
	text-shadow: black 1px 1px;
	padding: 10px 0;
	color: #d30000;
}

.CodeUserButton{
	width: fit-content;
	cursor: pointer;
	margin: 10px auto;
}

/* discord */
.DiscordContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	background-image: linear-gradient(0deg, #000f, #0000);
	padding: 20px;
	border-radius: 5px;
}

.DiscordInnerContainer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.DiscordTitle{
	font-size: 18pt;
	width: fit-content;
}

.DiscordText{
	font-size: 12pt;
	margin-top: 40px;
	width: fit-content;
	text-align: center;
}

.DiscordErrorText{
	font-size: 12pt;
	margin-top: 10px;
	margin-bottom: 40px;
	width: fit-content;
	text-align: center;
	background-color: #e37100;
	padding: 4px;
	border-radius: 4px;
}

.DiscordLoginButton{
	display: flex;
	align-items: center;
	padding: 10px;
	background-color: #5964f1;
	border-radius: 8px;
	border: #5964f1 solid 2px;
}

.DiscordLoginButton:hover{
	border: #fff solid 2px;
}

.DiscordLoginButtonIcon{
	width: 30px;
	aspect-ratio: 1 / 1;
	background-image: url(/pictures/discord_icon.jpg);
	background-position: center;
	background-size: contain;
}

.DiscordLoginButtonText{
	color: #fff;
	margin-left: 10px;
}

@media (orientation: portrait), (max-width: 800px) {

	
}