SimpleBox_CSS_for_Twine2_Harlowe

/*
 * Based on L's "Simple Box" template.
 * https://www.glorioustrainwrecks.com/node/5163
 *
 * Which looks like this
 * http://i.imgur.com/HwtpPYe.png
 *
 * (Modified to work with Twine 2.x Harlowe.)
 */

body {
	/* Vertical color gradient */
	background-image: linear-gradient(to bottom,  gainsboro, silver);
	background-image: -webkit-linear-gradient(top,  gainsboro, silver);
	background-attachment: fixed;

	/* Fallback color */
	background-color: silver;
}

tw-story {
	/* Box background (white with 70% opacity) */
	background-color: rgba(255, 255, 255, 0.7);

	/* Border */
	border: 2px solid white;

	/* Rounded corners */
	border-radius: 1em;

	/* Box width */
	width: 60%;

	/* Center the box */
	display: block;
	min-height: 40%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 5%;
	padding: 0px;
}

tw-passage {
	margin: 0px;
	/* Inner margin within the box */
	padding: 2em;

	/* Text formatting */
	color: black;
	font-size: 100%;
	text-align:justify;
}

/* This hides ("none") or shows ("inline") the back button. */
tw-sidebar {
	display:none;
}

tw-link {
	color: royalblue
}

tw-link:hover {
	color: deepskyblue;
	text-decoration: none;
}

/* Shrink the page when viewed on devices with a low screen width. */
@media screen and (max-width: 960px) {
	tw-story { width: 70%; }
	tw-passage { font-size: 90%;}
}
@media screen and (max-width: 840px) {
	tw-story { width: 80%; }
	tw-passage {  font-size: 87.5%; }
}
@media screen and (max-width: 720px) {
	tw-story { width: 90%; }
	tw-passage { font-size: 75%; }
}