html{
	background-image: url("backdrop-01.jpg");
	height:100%;
	background-size:cover;
	background-position:center;
	background-repeat: no-repeat;
	overflow-y:hidden;
}
body{
	color:white;
	font-family: adobe-caslon-pro, serif;
	font-style: normal;
	font-weight: 400;
}
a{
	display:block;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1;
}
.quote{
	width:60%;
	font-size:70px;
	display: inline-block;
	position: absolute;
	right: 70px;
	top: 50px;
	max-width:700px;
	text-align: right;
	line-height:100px;
}
.attribution{
	font-size:48px;
	font-style:italic;
	display: inline-block;
	position: absolute;
	right: 70px;
	top:320px;
	max-width:500px;
	text-align: right;
}

@media screen and (min-width: 768px) and (max-width: 1200px){
	.quote{
	width:65%;
	font-size:55px;
	display: inline-block;
	position: absolute;
	right: 50px;
	top: 30px;
	max-width:600px;
	line-height:69px;
	}
	.attribution{
	font-size:32px;
	font-style:italic;
	display: inline-block;
	position: absolute;
	right: 70px;
	top:240px;
	max-width:500px;
	}
}
@media screen and (min-width: 425px) and (max-width: 767px){
	html{
		background-image: url("backdrop-04.jpg");
	}
	.quote{
	width: 95%;
	font-size:42px;
	display: inline-block;
	position: absolute center;
	margin:auto;
	left: 0;
	right: 0;
	top:300px;
	max-width:400px;
	text-align: center;
	line-height:52px;
	}
	.attribution{
	font-size:29px;
	font-style:italic;
	display: inline-block;
	position: absolute;
	margin:auto;
	left: 0;
	right: 0;
	top:440px;
	max-width:500px;
	text-align: center;
	}
}
@media screen and (max-width: 424px){
	html{
		background-image: url("backdrop-04.jpg");
	}
	.quote{
	width: 95%;
	font-size:32px;
	display: inline-block;
	position: absolute center;
	margin:auto;
	left: 0;
	right: 0;
	top: 40%;
	max-width:370px;
	text-align: center;
	line-height:42px;
	}
	.attribution{
	font-size:19px;
	font-style:italic;
	display: inline-block;
	position: absolute;
	margin:auto;
	left: 0;
	right: 0;
	top: 60%;
	max-width:400px;
	text-align: center;
	}
}