@font-face{
	font-family: gravestone;
	src: url('/fonts/caslonantique.woff2');
	font-display: swap;
}

div#container{
	background-color: #237ABC;
	background-image: url('/img/cloudysky.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}

div#container > div#story{
	position: absolute;
	background-color: #A4A09B;
	background-image: url('/img/concrete.jpg');
	font-family: gravestone;
	font-size: 48pt;
	display: flex;
	align-items: center;
	max-width: 1000px;
	justify-content: center;
	height: calc(100% - 96px);
	div#storytext{
		padding: 0 32px;
		text-align: center;
		color: #333333;
	    text-shadow: 0 2px white;
	}
}

@media only screen and (max-width: 769px){
	div#container > div#story{
		border-radius: 0;
		font-size: 36pt;
		max-width: 100%;
		div#storytext{
			align-self: center;
			margin: 0;
			padding: 0 16px;
		}
	}
}