@charset 'UTF-8';

:root {
	--primary-color: #49A09D;
	--secondary-color: #5F2C82;
}

@media screen and (min-width: 768px) {
	body {
		background-image: linear-gradient(to top, var(--primary-color), var(--secondary-color));
	}
}

@media screen and (min-width: 768px) and (max-width: 992px) {
	section#login {
		width: 80vw;
		height: 270px;
	}
	
	section#login > div#image {
		width: 30%;
		height: 100%;
		float: left;
	}
	
	section#login > div#form {
		width: 70%;
		float: right;
	}
}

@media screen and (min-width: 992px) {
	section#login {
		width: 950px;
		height: 350px;
	}
	
	section#login > div#image {
		width: 50%;
		height: 100%;
		float: right;
	}
	
	section#login > div#form {
		width: 50%;
		float: left;
	}
	
	section#login > div#form > p {
		font-size: 1em;
	}
}