:root {
	--home-header-height: 680px;
}

#home-container {
	background-image: url("../images/home-header-background.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: var(--home-header-height);

	#slogan {
		color: var(--color-text);
		font-size: 48px;
	}
}

@media all and (max-width: 1250px) {
	#home-container {
		height: 640px;

		#slogan {
			font-size: 40px;
		}
	}
}

@media all and (max-width: 1050px) {
	#home-container {
		height: 600px;

		#slogan {
			font-size: 35px;
		}

		#ilustration-left {
			margin-left: -45px;
		}

		#ilustration-right {
			margin-right: -45px;
		}
	}
}

@media all and (max-width: 850px) {
	#home-container {
		height: 550px;

		#slogan {
			font-size: 32px;
		}

		#ilustration-left {
			margin-left: -85px;
		}

		#ilustration-right {
			margin-right: -85px;
		}
	}
}

@media all and (max-width: 710px) {
	#home-container {
		height: 480px;

		#slogan {
			font-size: 30px;
		}

		#ilustration-left {
			margin-left: -75px;
		}

		#ilustration-right {
			margin-right: -75px;
		}
	}
}

@media all and (max-width: 550px) {
	#home-container {
		height: 420px;

		#slogan {
			font-size: 25px;
		}

		#ilustration-left {
			margin-left: -120px;
		}

		#ilustration-right {
			margin-right: -120px;
		}
	}
}

@media all and (max-width: 450px) {
	#home-container {
		height: 380px;

		#slogan {
			font-size: 22px;
		}
	
		#ilustration-left {
			margin-left: -115px;
		}
	
		#ilustration-right {
			margin-right: -115px;
		}
	}
}