* {
	box-sizing: border-box;
}

body {
	font-family: Roboto, sans-serif;
	font-weight: bold;
	text-align: center;
	display: block;
	margin: auto;
	color: black;
	background-color: #FAFAFA;
}

body.dark {
	color: white;
	background-color: #212121;
}

#toggle {
	position: absolute;
	right: 10px;
	top: 10px;
}

/* ### Desktops #### */
@media screen
{
	h1 {
		font-size: 450%;
		margin: 40px auto;
	}

	p {
		font-size: 300%;
		margin: 60px 0 5px;
	}

	#user, #pass
	{
		display: inherit;
		width: 400px;
		font-size: 200%;
		padding: 10px;
		text-align: inherit;
		border: 5px solid darkgray;
		border-radius: 10px;
		margin: 0 auto 120px;
	}

	#submit {
		-webkit-appearance: none;
		background-color: #61892f;
		color: inherit;
		font-size: 300%;
		padding: 20px 40px;
		border: none;
		border-radius: 10px;
		cursor: pointer;
	}
}

/* ### Laptops ### */
@media screen and (max-width : 1440px)
{
	h1 {
		font-size: 400%;
		margin: 40px auto;
	}

	p {
		font-size: 250%;
		margin: 0 0 5px;
	}

	#user, #pass
	{
		display: inherit;
		width: 300px;
		font-size: 200%;
		padding: 8px;
		text-align: inherit;
		border: 5px solid darkgray;
		border-radius: 10px;
		box-sizing: border-box;
		margin: 0 auto 60px;
	}

	#submit
	{
		-webkit-appearance: none;
		background-color: #61892f;
		color: inherit;
		font-size: 250%;
		padding: 20px 40px;
		border: none;
		border-radius: 10px;
		cursor: pointer;
	}
}

/* ### Tablets ### */
@media screen and (max-width : 768px)
{
	h1 {
		font-size: 350%;
		margin: 60px 5%;
	}

	p {
		font-size: 300%;
		margin: 5px 0;
	}

	#user, #pass
	{
		display: inherit;
		width: 300px;
		font-size: 200%;
		padding: 8px;
		text-align: inherit;
		border: 5px solid darkgray;
		border-radius: 10px;
		box-sizing: border-box;
		margin: 0 auto 60px;
	}

	#submit
	{
		-webkit-appearance: none;
		background-color: #61892f;
		color: inherit;
		font-size: 250%;
		padding: 20px 40px;
		border: none;
		border-radius: 10px;
		cursor: pointer;
		margin: 40px 0;
	}
}

/* ### Smartphones ### */
@media screen and (max-width : 425px)
{
	h1 {
		font-size: 250%;
		margin: 30px auto 40px;
	}

	p {
		font-size: 200%;
		margin: 0 0 5px;
	}

	#user, #pass
	{
		display: inherit;
		width: 70%;
		font-size: 150%;
		padding: 8px;
		text-align: inherit;
		border: 3px solid darkgray;
		border-radius: 10px;
		box-sizing: border-box;
		margin: 0 auto 70px;
	}

	#submit
	{
		-webkit-appearance: none;
		background-color: #61892f;
		color: inherit;
		font-size: 200%;
		padding: 25px 50px;
		border: none;
		border-radius: 15px;
		cursor: pointer;
	}
	
	#toggle {
		right: 5px;
		top: 5px;
	}
}