html, body {
	font-family: Arial;
	height: 100%;
}

header {
	padding: 1em;
}

footer {
	padding: 1em;
}

.background {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent), url("https://source.unsplash.com/random/1920x1080/");
	background-position: 50% 50%;
	background-size: cover;
}

.poster {	
	height: 80%;
	padding:  5%;
}

.quote {
	color:  #fff;
	font-family: Courier, serif;
	font-size:  4em;
	text-shadow: 0 0 0.1em rgba(0,0,0,0.5);
}

.author {
	color:  #fff;
	text-shadow: 0 0 0.1em rgba(0,0,0,0.5);
}


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
	.background {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent), url("https://source.unsplash.com/random/1080x1920/");
		background-position: 50% 50%;
		background-size: cover;
	}	
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
	.background {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent), url("https://source.unsplash.com/random/1920x1080/");
		background-position: 50% 50%;
		background-size: cover;
	}
}