@charset 'utf-8';


.story-container		{
	position:	absolute;
	top:		calc(var(--menubar-height) + calc(var(--mb-border-width) * 2));
	left:		0;
	width:		var(--story-width);
	height:		var(--story-height);
	clear:		both;
	float:		left;
	overflow:	hidden;
	border:		var(--story-border-width) solid grey;
	border-radius:	var(--story-bradius);
}
/*  Provides the rolling shade effect. It works because
    of absolute positioning.
*/
.block-effect			{
	position:		absolute;
	top:			0;
	left:			0;
	width:			100%;
	height:			var(--story-height);
	background-color:	rgba(0, 0, 0, 0.3);
	transform-origin:	center left;
 	transform:		scaleX(0);
 	animation:		shadewave 2.5s ease-out 0s 1 forwards;
}
.title-left        		{
	position:	absolute;
 	opacity:	0;
	top:		calc(var(--story-height) * 0.15);
	left:		2%;
	/*  1/2 the width of the container.
	    height will be determined by the font size used
	    in the <h1> tag.
	*/
	width:		calc(var(--story-width) * 0.6);
 	text-align:	center;
	animation:	fade-in 2s ease-out 0.5s 1 forwards;
}
div[class^="title"] > h1 	{
	font-size:	8vw;
}
.image-right       		{
	position:	absolute;
	top:		calc(var(--story-height) * 0.15);
	left:		calc(var(--story-width) * 0.64);
	opacity:	0;
	width:		calc(var(--story-width) * 0.3);
	height:		calc(var(--story-height) * 0.53);
        box-shadow: 	8px 8px 8px grey;
 	border: 	10px solid black;   
	border-radius:	14px;
	animation:	fade-in 2s ease-out 0.5s 1 forwards;
}
div[class^="image"] > img	{
	width:		100%;
	height:		auto;
	margin-bottom: -4px;
}
.story-title	{
	position:	absolute;
	top:		calc(var(--menubar-height) + calc(var(--mb-border-width)    * 2) +
			     var(--story-height)   + calc(var(--story-border-width) * 2));
	left:		0;
	width:		var(--story-width);
	height:		var(--story-title-height);
	clear:		both;
	float:		left;
	text-align:	center;
	font-size:	var(--story-title-font-size);
	line-height:	calc(var(--story-title-height) + .5vw);
	letter-spacing:	1.2vw;
	text-shadow:	2px 2px gray;
	vertical-align: middle;
 	border:		var(--story-border-width) solid gray;
	border-radius:	var(--story-bradius);
	background-image:	linear-gradient(270deg,
				rgba(250,128,114,.75) 0%,  /* Salmon  */
		 		rgba(191,52,117,1) 50%,  
				rgba(250,128,114,.75) 100%);
}
.story-title > a		{
	text-decoration:	none;
	color:			gold;
}
.story-container2		{
	position: 		absolute;
	top:			calc(var(--menubar-height) + calc(var(--mb-border-width) * 2) +
			     	     var(--story-height)   + var(--story-title-height) + calc(var(--story-border-width) * 4));
	left:			0;
	clear: 			both;
	float: 			left;
	width:			var(--story-width);
	height:			120vw;
	overflow:		hidden;
	border:			var(--story-border-width) solid gray;
	border-radius:		var(--story-bradius);
	background-image:	url("..\\img\\Picture3.png");
}
.story-container2 > img		{
	position:	absolute;
	top:		0;
	left:		0;
	width:		calc(var(--story-width) * 2.5);
	height:		auto;
	border-radius:	var(--story-bradius);
	box-shadow:	5px 10px grey;
	z-index:	-1;
}
.sc-row1 		{
	position: 	absolute;
	top:		2vw;
	left:		2vw;
	clear:		both;      /* displays the row only when margins are clear of previously floated columns */
	width:		var(--story-width);
}
.sc-row1 > p			{
	font-size:		6vw;
	font-weight:		bold;
	color:			gold;
	text-align:		center;
	text-shadow:		-1px -1px black;
	background-color:	rgba(80,0,0,.35);
 	border-radius:		16px; 
}
.sc1-accent-bar   		{
	position:	absolute;
	top:		13.5vw;
	height:		.6vw;
	width:		calc(var(--story-width) + 1vw);
	background:	white;
	z-index:	3;
}
.sc-row2 		{
	position: 	absolute;
	top:		22vw;
	left:		2vw;
	clear:		both;
	width:		var(--story-width);
}
.sc2-text		{
	position:	absolute;
	top:		0;
	left:		0;
}
.sc2-text > p		{
	font-size:	4vw;
	font-weight:	bold;
	color:		white;
	text-shadow:	1px 1px black;
}
a > p.sc3-p1 		{
	color:		Gold;
	margin-top:	6vw;
	font-family:	Verdana;
	font-size:	5vw;
	text-align:	center;
	font-weight:	bold;
	text-shadow:	-1px -1px black;
	background-color:	rgba(80,0,0,.35);
 	border-radius:		16px; 
}
.sc2-text > a		{
	text-decoration-line:	none;
}
@keyframes shadewave	{
	to {	transform: scaleX(1);
}	   }
@keyframes fade-in	{
	to {	opacity: 1;
}	   }