@media screen and (max-device-width: 480px){
	html, body {
		height: 812px;
		width: 375px;
		overflow: hidden !important;
		margin: 0;
		padding: 0;
		font-family: 'Roboto';font-size: 22px;
	}
	#login-box {
		margin: auto;
		height: 100vh;
		width: 100%;
		overflow: hidden !important;
		
		/* background-color: lightblue; */
		display: grid;
		grid-template-columns: 10% 40% 40% 10%;
		grid-template-rows: 5% 10% 20% 5% 10% 10% 5% 5% 10% 2% 10% 5%;
		grid-template-areas:
			". . . ."
			". title title ."
			". logo logo ."
			". . . ."
			". username username ."
			". password password ."
			". remember forgot ."
			". . . ."
			". login login ."
			". new_text new_text ."
			". register register ."
			". . . .";
	}
	
	#title {
		grid-area: title;
		display: flex;
		justify-content: center;
		font-size: 30px !important;
		letter-spacing: 2px;
		font-weight: bold;
		margin: 0;
	}
	
	#username {
		grid-area: username;
	}
	
	#password {
		grid-area: password;
	}
	
	.mui-btn--primary {
		grid-area: login;
		height: 80% !important;
		font-size: 25px !important;
		font-weight: bold !important;
		letter-spacing: 2px !important;
		border-radius: 5% !important;
	}
	
	.mui-btn--accent {
		grid-area: register;
		height: 80% !important;
		font-size: 25px !important;
		font-weight: bold !important;
		letter-spacing: 2px !important;
		border-radius: 5% !important;
	}

	#logo{
		grid-area: logo;
		display: flex;
		justify-content: center;
	}

	#rememberLabel{
		grid-area: label;
	} 

	#rememberBox{
		margin-right: 10px;
	}

	#remember{
		grid-area: remember;
	}

	#forgot{
		grid-area: forgot;
	}
	#new_user_text{
		grid-area: new_text;
		margin-bottom: 0px;
		display: flex;
		justify-content: center;

		bottom: 0;
	}
}