/* Dice Rolls Engine */
.diceRollsLightbulbsHolder {
	position: relative;
	width: 20%;
}
.diceRollsUnderTitle {
	font-size: 150%;
	line-height: 0.333;
	text-shadow:0.1em 0 0.2em black,0 0.1em 0.2em black,-0.1em 0 0.2em black,0 -0.1em 0.2em black;
	display:block;
	color:rgba(255,255,255,0.75);
	font-weight:700;
}
.diceRollsAbilityScreen {
	color: black;
	visibility:hidden;
	opacity:0;
	left: 5%;
	width: 90%;
	padding: 1em 1em 1.5em 1em;
	position:absolute;
	top: 6%;
	box-sizing: border-box;
	margin-top: 1em;
	border-radius: 0.1em;
	/*border: 1em solid rgba(176,190,197 ,0.333);*/
	box-shadow: 0 0 0.5em 0.25em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.25em black inset;
	background:
	linear-gradient(to right,	rgba(0,0,0,0.5),	rgba(120,144,156 ,1) 0.333em, 	rgba(0,0,0,0) 0.5em),
	linear-gradient(to left,	rgba(0,0,0,0.5),	rgba(120,144,156 ,1) 0.333em, 	rgba(0,0,0,0) 0.5em),
	linear-gradient(to bottom,	rgba(0,0,0,0.5),	rgba(120,144,156 ,1) 0.333em, 	rgba(0,0,0,0) 0.5em),
	linear-gradient(to top,		rgba(0,0,0,0.5),	rgba(120,144,156 ,1) 0.333em, 	rgba(0,0,0,0) 0.5em),
	
	linear-gradient(to bottom, rgba(178,235,242 ,0.88), rgba(178,235,242 ,0.44), rgba(178,235,242,0)),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.25),rgba(0,0,0,0.125) 0.125em,rgba(0,0,0,0.125) 0.125em,rgba(0,0,0,0.25) 0.25em),
	
	linear-gradient(to bottom right, rgba(245,245,245 ,1), rgba(178,235,242 ,0.667), rgba(178,235,242 ,0.667), rgba(245,245,245 ,1));
	will-change: opacity;
}
.diceRollsNarratorScreen {
	color: black;
	visibility:hidden;
	opacity:0;
	left: 5%;
	width: 90%;
	padding: 1em 1em 1.5em 1em;
	position:absolute;
	top: 6%;
	box-sizing: border-box;
	margin-top: 1em;
	border-radius: 0.1em;
	/*border: 1em solid rgba(176,190,197 ,0.333);*/
	box-shadow: 0 0 0.5em 0.25em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.25em black inset;
	background:
	linear-gradient(to right,	rgba(0,0,0,0.5),	rgba(120,144,156 ,1) 0.333em, 	rgba(0,0,0,0) 0.5em),
	linear-gradient(to left,	rgba(0,0,0,0.5),	rgba(120,144,156 ,1) 0.333em, 	rgba(0,0,0,0) 0.5em),
	linear-gradient(to bottom,	rgba(0,0,0,0.5),	rgba(120,144,156 ,1) 0.333em, 	rgba(0,0,0,0) 0.5em),
	linear-gradient(to top,		rgba(0,0,0,0.5),	rgba(120,144,156 ,1) 0.333em, 	rgba(0,0,0,0) 0.5em),
	
	linear-gradient(to bottom, rgba(178,235,242 ,0.88), rgba(178,235,242 ,0.44), rgba(178,235,242,0)),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.25),rgba(0,0,0,0.125) 0.125em,rgba(0,0,0,0.125) 0.125em,rgba(0,0,0,0.25) 0.25em),
	
	linear-gradient(to bottom right, rgba(245,245,245 ,1), rgba(178,235,242 ,0.667), rgba(178,235,242 ,0.667), rgba(245,245,245 ,1));
	will-change: opacity;
}
.diceRollsScreen {
	margin-top:0.333em;
	padding-top:0.4em;
	box-shadow: 0 0 0.333em 0.333em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
	background:
	linear-gradient(to bottom right, rgba(220,237,200 ,0.5), rgba(200,230,201 ,0.25), rgba(240,244,195 ,0.5)),
	/*linear-gradient(to bottom, rgba(255,205,210 ,0.667), rgba(255,255,255,0), rgba(187,222,251 ,0.667)),*/
	repeating-linear-gradient(30deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1) 0.1em,rgba(0,0,0,0.1) 0.1em,rgba(0,0,0,0.333) 0.2em),
	rgba(255,255,255 ,0.25);
}
.diceRollsLustStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(173,20,87,0.2),rgba(173,20,87,0.06) 0.1em,rgba(173,20,87,0.09) 0.1em,rgba(173,20,87,0.2) 0.2em), rgba(255,205,210 ,1); /* pink 800 */
	overflow:hidden;
	box-shadow:0 0 0.1em 0.1em black, 0 0 0.1em 0.05em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.125em 0.125em black inset;
	height: 1.5em;
	position: relative;
	border-radius: 0.167em;
	margin: 0.667em;
}
.diceRollsLustStatsBar {
	border-radius:0;	
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), #AD1457, #D81B60, rgba(127,127,127,0.5)),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,#AD1457,#D81B60);
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
	will-change: transform;
}
.diceRollsLightbulbsOverBar {
	box-shadow: 0 0 0.333em 0.1em rgba(0,0,0,1) inset, 0 0 0.333em 0.1em black;
	width: 100%;
    position: relative;
    display: flex;
    background: white;
    height: 2.2em;
    top: 0;
	background:
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8),rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(0,0,0,0),rgba(0,0,0,0.5), rgba(0,0,0,0.333)),
	repeating-linear-gradient(-15deg,rgba(0,0,0,0.3),rgba(0,0,0,0.2) 0.1em,rgba(0,0,0,0.2) 0.1em,rgba(0,0,0,0.3) 0.2em),
	linear-gradient(to left,rgba(55,71,79,0.75),rgba(176,190,197,0.5),rgba(207,216,220,0.333),rgba(176,190,197,0.5),rgba(55,71,79,0.75)),
	rgba(255,255,255 ,1);
}
.diceHolderBar {
	display: flex;
	margin: 0 0;
	padding: 0;
	border-radius: 0.5em;
	/*box-shadow: 0 0 0.5em 0.5em black, 0 0 0.5em 0.25em black, 0 0 0.5em 0.25em black inset;*/
}
.opponentSideContainer {
	box-shadow: 0 0 0.25em 0.125em rgba(0,0,0,0.88) inset;
	overflow: hidden;
	background:
	linear-gradient(to top, rgba(255,255,255,0.5), rgba(255,255,255,0.0), rgba(255,255,255,0.0), rgba(0,0,0,0.75), rgba(0,0,0,1)),
	linear-gradient(to left,
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#b71c1c,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#b71c1c,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#b71c1c,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#b71c1c,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#b71c1c,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0)
	),
	/*repeating-linear-gradient(-12deg,rgba(0,0,0,0.24),rgba(0,0,0,0.12) 0.18em,rgba(0,0,0,0.12) 0.18em,rgba(0,0,0,0.24) 0.36em),*/
	linear-gradient(to bottom, rgba(183,28,28 ,1), rgba(183,28,28 ,1), rgba(198,40,40 ,0.5),rgba(255,255,255,0.5)); /* red 900 900 800 */
}
.playerSideContainer {
	box-shadow: 0 0 0.25em 0.125em rgba(0,0,0,0.88) inset;
	overflow: hidden;
	background:
	linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.0), rgba(255,255,255,0.0), rgba(0,0,0,0.75), rgba(0,0,0,1)),
	linear-gradient(to left,
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#0D47A1,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#0D47A1,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#0D47A1,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#0D47A1,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0),
	rgba(0,0,0,0.333),rgba(255,255,255,0.667),#0D47A1,rgba(255,255,255,0.667),rgba(0,0,0,0.333),
	rgba(0,0,0,0.0)
	),
	/*repeating-linear-gradient(-12deg,rgba(0,0,0,0.24),rgba(0,0,0,0.12) 0.18em,rgba(0,0,0,0.12) 0.18em,rgba(0,0,0,0.24) 0.36em),*/
	linear-gradient(to top, rgba(13,71,161 ,1), rgba(13,71,161 ,1), rgba(21,101,192 ,0.5),rgba(255,255,255,0.5)); /* blue 900 900 800 */
}
.diceHolder {
	width: 100%;
	display: inline-block;
	transform: matrix(1, 0, 0, 1, 0, 0);
	margin: 0 0.4em;
	border-radius: 18%;
	box-shadow:  0 0 0.333em 0.333em rgba(0,0,0,1) inset;
	box-shadow:  0 0 0.25em 0.1em rgba(0,0,0,1) inset, 0 0 0.075em 0.075em rgba(128,222,234 ,0.5), 0 0 0.1em 0.2em rgba(0,0,0,0.75), 0.05em 0.10em 0.15em 0.15em rgba(0,0,0,0.75);
	will-change: transform, opacity;
}
.diceFace {
	position: absolute;
	opacity:0;
	pointer-events: none;
}
.redDiceHolder {
	background:
	linear-gradient( 216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(-216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	/*linear-gradient(  36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient( -36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),*/
	linear-gradient(to right,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to left,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to bottom,	rgba(255,255,255,0.5),		rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to top,		rgba(0,0,0,0.5),			rgba(0,0,0,0.25) 0.5em, 		rgba(0,0,0,0) 1em),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.2) 0.25em),
	radial-gradient(#e53935, #b71c1c 90%, #EEEEEE); /* red 600 900 */
}
.orangeDiceHolder {
	background:	
	linear-gradient( 216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(-216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(  36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient( -36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient(to right,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to left,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to bottom,	rgba(255,255,255,0.5),		rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to top,		rgba(0,0,0,0.5),			rgba(0,0,0,0.25) 0.5em, 		rgba(0,0,0,0) 1em),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.2) 0.25em),
	radial-gradient(#F4511E, #BF360C 90%, #EEEEEE); /* orange 600 900 */
}
.pinkDiceHolder {
	background:	
	linear-gradient( 216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(-216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(  36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient( -36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient(to right,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to left,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to bottom,	rgba(255,255,255,0.5),		rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to top,		rgba(0,0,0,0.5),			rgba(0,0,0,0.25) 0.5em, 		rgba(0,0,0,0) 1em),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.2) 0.25em),
	radial-gradient(#D81B60, #880E4F 90%, #EEEEEE); /* green 600 900 */
}
.amberDiceHolder {
	background:	
	linear-gradient( 216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(-216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(  36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient( -36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient(to right,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to left,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to bottom,	rgba(255,255,255,0.5),		rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to top,		rgba(0,0,0,0.5),			rgba(0,0,0,0.25) 0.5em, 		rgba(0,0,0,0) 1em),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.2) 0.25em),
	radial-gradient(#FFB300, #FF6F00 90%, #EEEEEE); /* amber 600 900 */
}

.blueDiceHolder {
	background:	
	linear-gradient( 216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(-216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(  36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient( -36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient(to right,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to left,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to bottom,	rgba(255,255,255,0.5),		rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to top,		rgba(0,0,0,0.5),			rgba(0,0,0,0.25) 0.5em, 		rgba(0,0,0,0) 1em),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.2) 0.25em),
	radial-gradient(#1E88E5, #0D47A1 90%, #EEEEEE); /* blue 600 900 */
}
.greenDiceHolder {
	background:	
	linear-gradient( 216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(-216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(  36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient( -36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient(to right,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to left,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to bottom,	rgba(255,255,255,0.5),		rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to top,		rgba(0,0,0,0.5),			rgba(0,0,0,0.25) 0.5em, 		rgba(0,0,0,0) 1em),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.2) 0.25em),
	radial-gradient(#43A047, #1B5E20 90%, #EEEEEE); /* blue 600 900 */
}
.tealDiceHolder {
	background:	
	linear-gradient( 216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(-216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(  36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient( -36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient(to right,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to left,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to bottom,	rgba(255,255,255,0.5),		rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to top,		rgba(0,0,0,0.5),			rgba(0,0,0,0.25) 0.5em, 		rgba(0,0,0,0) 1em),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.2) 0.25em),
	radial-gradient(#00897B, #004D40 90%, #EEEEEE); /* teal 600 900 */
}
.indigoDiceHolder {
	background:	
	linear-gradient( 216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(-216deg,	rgba(255,255,255,0.5),		rgba(255,255,255,0.333) 1em,		rgba(255,255,255,0) 1.5em),
	linear-gradient(  36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient( -36deg,	rgba(0,0,0,0.5),			rgba(0,0,0,0.333) 1em,			rgba(0,0,0,0) 1.5em),
	linear-gradient(to right,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to left,	rgba(255,255,255,0.333),	rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to bottom,	rgba(255,255,255,0.5),		rgba(255,255,255,0.25) 0.5em, 	rgba(255,255,255,0) 1em),
	linear-gradient(to top,		rgba(0,0,0,0.5),			rgba(0,0,0,0.25) 0.5em, 		rgba(0,0,0,0) 1em),
	repeating-linear-gradient(12deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.1) 0.125em,rgba(0,0,0,0.2) 0.25em),
	radial-gradient(#3949AB, #1A237E 90%, #EEEEEE); /* teal 600 900 */
}
/* Dice Rolls Engine End */

/* SX ENGINE */
.lightbulbBarBlue {
    width: 1em;
    height: 1em;
    position: absolute;
	border: 0.05em solid rgba(0,0,0,0.667);
    border-radius: 33.3%;
    box-shadow: 0 0 0.08em 0.04em black, 0 0 0.24em 0.01em black inset;
    background: linear-gradient(36deg,rgba(2,136,209 ,1),rgba(88,203,255 ,0.75),rgba(2,136,209 ,1));
}
.lightbulbBlue {
	height: 0.8em;
    margin: 0.1em;
    width: 0.8em;
    display: inline-block;
    background: linear-gradient(-36deg,rgba(41,182,246 ,0.333),rgba(179,229,252 ,0.333),rgba(41,182,246 ,0.333)), linear-gradient(36deg,rgba(79,195,247 ,1),rgba(179,229,252 ,1),rgba(79,195,247 ,1));
    border-radius: 25%;
    box-shadow: 0em 0em 0.5em 0.2em rgba(41,182,246 ,1);
	opacity: 0;
	will-change: opacity;
}

.lightbulbBarPink {
    width: 1em;
    height: 1em;
    position: absolute;
	border: 0.05em solid rgba(0,0,0,0.667);
    border-radius: 33.3%;
    box-shadow: 0 0 0.08em 0.04em black, 0 0 0.24em 0.01em black inset;
    background: linear-gradient(36deg,rgba(136,14,79 ,1),rgba(244,143,177 ,0.75),rgba(136,14,79 ,1));
}
.lightbulbPink {
	height: 0.8em;
    margin: 0.1em;
    width: 0.8em;
    display: inline-block;
    background: linear-gradient(-36deg,rgba(255,128,171 ,0.333),rgba(248,187,208 ,0.333),rgba(255,128,171 ,0.333)), linear-gradient(36deg,rgba(255,64,129 ,1),rgba(248,187,208 ,1),rgba(255,64,129 ,1));
    border-radius: 25%;
    box-shadow: 0em 0em 0.5em 0.2em rgba(244,143,177 ,1);
	opacity: 0;
	will-change: opacity;
}
.lightbulbBarGreen {
    width: 1em;
    height: 1em;
    position: absolute;
	border: 0.05em solid rgba(0,0,0,0.667);
    border-radius: 33.3%;
    box-shadow: 0 0 0.08em 0.04em black, 0 0 0.24em 0.01em black inset;
    background: linear-gradient(36deg,rgba(27,94,32 ,1),rgba(197,225,165 ,0.88),rgba(27,94,32 ,1));
}
.lightbulbGreen {
	height: 0.8em;
    margin: 0.1em;
    width: 0.8em;
    display: inline-block;
    background: linear-gradient(-36deg,rgba(104,159,56 ,0.333),rgba(220,237,200 ,0.333),rgba(104,159,56 ,0.333)), linear-gradient(36deg,rgba(104,159,56 ,1),rgba(165,214,167 ,1),rgba(104,159,56 ,1));
    border-radius: 25%;
	box-shadow: 0em 0em 0.5em 0.2em rgba(100,221,23 ,1);
	opacity: 0;
	will-change: opacity;
}
.lightbulbBarYellow {
    width: 1em;
    height: 1em;
    right: 1em;
    position: absolute;
	border: 0.05em solid rgba(0,0,0,0.667);
    border-radius: 33.3%;
    box-shadow: 0 0 0.08em 0.04em black, 0 0 0.24em 0.01em black inset;
    background: linear-gradient(36deg,rgba(191,54,12 ,1),rgba(255,204,128 ,0.88),rgba(191,54,12 ,1));
}
.lightbulbYellow {
    height: 0.8em;
    margin: 0.1em;
    width: 0.8em;
    display: inline-block;
    background: linear-gradient(-36deg,rgba(255,160,0 ,0.333),rgba(255,245,157 ,0.333),rgba(255,160,0 ,0.333)), linear-gradient(36deg,rgba(255,160,0 ,1),rgba(255,245,157 ,1),rgba(255,160,0 ,1));
    border-radius: 25%;
    box-shadow: 0em 0em 0.5em 0.2em rgba(255,193,7 ,1);
	opacity: 0;
	will-change: opacity;
}
/* Slot Machine */
.tokenPanel {
	/*box-shadow: 0 0 0.333em 0.15em rgba(0,0,0,1) inset;*/
	display: flex;
    padding: 0.5em;
	background:
	linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0.5),rgba(255,255,255,0.2),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(0,0,0,0),rgba(0,0,0,0.5), rgba(0,0,0,0.333)),
	repeating-linear-gradient(-24deg,rgba(2,31,31,0.24),rgba(31,31,31,0.16) 0.12em,rgba(31,31,31,0.16) 0.12em,rgba(31,31,31,0.24) 0.24em),
	linear-gradient(to left,
		rgba(255,179,0 ,1),rgba(255,202,40 ,1),rgba(255,183,77 ,1),rgba(255,202,40 ,1),rgba(255,179,0 ,1),
		rgba(255,179,0 ,1),rgba(255,202,40 ,1),rgba(255,183,77 ,1),rgba(255,202,40 ,1),rgba(255,179,0 ,1)
	);
}
.slotMachineScreen {
	margin-top: 2.5em;
	box-shadow: 0 0 0.1em 0.15em rgba(130,119,23,0.92), 0 0 0.5em 0.25em rgba(0,0,0,0.5), 0 0 0.5em 0.25em rgba(0,0,0,1) inset;
	box-shadow:  0 0 0.4em 0.2em rgba(0,0,0,0.75), 0 0 0.05em 0.333em rgba(38,50,56 ,1), 0 0 0.4em 0.2em rgba(38,50,56 ,1) inset, 0 0 0.5em 0.25em rgba(0,0,0,1) inset;
	boder-radius:0.15em;
	position: relative;
	background:
	
	linear-gradient(to right,
	rgba(238,238,238 ,0.667),	rgba(128,222,234 ,0.5),rgba(0,229,255 ,0.5),rgba(128,222,234 ,0.5),		rgba(238,238,238 ,0.667),
	rgba(238,238,238 ,0.667),	rgba(244,143,177 ,0.5),rgba(245,0,87 ,0.5),rgba(244,143,177 ,0.5),	rgba(238,238,238 ,0.667),
	rgba(238,238,238 ,0.667),	rgba(128,222,234 ,0.5),rgba(0,229,255 ,0.5),rgba(128,222,234 ,0.5),		rgba(238,238,238 ,0.667)
	),
	
	linear-gradient(to bottom, rgba(245,245,245,0.333),rgba(245,245,245,0.75),       rgba(255,255,255,0.88), rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0), rgba(0,0,0,0.88),   rgba(31,31,31 ,0.75),rgba(31,31,31,0.333)),
	repeating-linear-gradient(-12deg,rgba(31,31,31,0.6),rgba(31,31,31,0.3) 0.1em,rgba(31,31,31,0.3) 0.1em,rgba(31,31,31,0.6) 0.2em),
	
	whitesmoke;
}
.lightbulbsOverBar {
	box-shadow: 0 0 0.333em 0.1em rgba(0,0,0,1) inset, 0 0 0.333em 0.1em black;
	width: 100%;
    position: relative;
    display: flex;
    background: white;
    height: 2em;
    top: 0;
	background:
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8),rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(0,0,0,0),rgba(0,0,0,0.5), rgba(0,0,0,0.333)),
	repeating-linear-gradient(-15deg,rgba(31,31,31,0.3),rgba(31,31,31,0.2) 0.1em,rgba(31,31,31,0.2) 0.1em,rgba(31,31,31,0.3) 0.2em),
	linear-gradient(to left,rgba(55,71,79,0.667),rgba(176,190,197,0.667),rgba(207,216,220,0.667),rgba(176,190,197,0.667),rgba(55,71,79,0.667));
}
.lcdScreenUnder {
	background:
	repeating-linear-gradient(0deg,rgba(31,31,31,0.1),rgba(31,31,31,0.06) 0.09em,rgba(31,31,31,0.06) 0.09em,rgba(31,31,31,0.1) 0.18em),
	repeating-linear-gradient(90deg,rgba(31,31,31,0.1),rgba(31,31,31,0.06) 0.09em,rgba(31,31,31,0.06) 0.09em,rgba(31,31,31,0.1) 0.18em),
	linear-gradient(-30deg,
		rgba(85,139,47 ,1),rgba(139,195,74 ,1),rgba(156,204,101 ,1),
		rgba(156,204,101 ,1),rgba(139,195,74 ,1),rgba(85,139,47 ,1)
	);
	font-family: VT323;
	font-size: 200%;
	height:1.5em;
	text-align: center;
	font-weight:;
	box-shadow: 0 0.0.1em 0.25em rgba(0,0,0,1) inset;
	padding:0.15em 0 0.1em 0;
	overflow: hidden;
}
.lcdScreenContent {
	padding-top:0.08em;
	width: 100%;
    position: absolute;
	will-change: opacity;
}
.slotMachineUnderScreen {
	padding-top:0.2em;
	background:
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.667),rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(0,0,0,0),rgba(0,0,0,0.5), rgba(0,0,0,0.333)),
	repeating-linear-gradient(-0,rgba(2,31,31,0.2),rgba(31,31,31,0.16) 0.1em,rgba(31,31,31,0.16) 0.1em,rgba(31,31,31,0.2) 0.2em),
	linear-gradient(to left,
	rgba(55,71,79,0.667),rgba(96,125,139,0.667),rgba(144,164,174,0.333),rgba(96,125,139,0.667),rgba(55,71,79,0.667),
	rgba(55,71,79,0.667),rgba(96,125,139,0.667),rgba(144,164,174,0.333),rgba(96,125,139,0.667),rgba(55,71,79,0.667)
	);
}
.counterBarOver {
	overflow:hidden;
	position: relative;
}
.counterDigit{
	position: absolute;
	box-shadow: 0 0 0.3em 0.2em black inset;
	bottom: 0;
	will-change: transform, opacity;
}
.digitSprite {
	display:block;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	/*box-shadow: 0 0 0.25em 0.1em black inset;*/
	will-change: transform;
}
/* slot machine end */


/* powertip tips */
#powerTip {
	position: absolute;
	display: none;
	cursor: default;
	color: #000000;
	/*white-space: nowrap;*/
	z-index: 2147483647;
	padding:0.33em;
	/*margin-top:0.1667em;*/
	box-shadow: 0em 0em 0.25em 0.1em black, 0 0 0.125em 0em black inset;
	border-radius:0.15em;
	border:0;
	background: linear-gradient(to bottom right,rgba(211,211,211,1), rgba(224,224,224,1),rgba(245,245,245,1),rgba(224,224,224,1),rgba(191,191,191,1));
	max-width: 300px;
	font-size:84%;
}
/* end powertip */
/* Avatar */
.playerAvatarCanvas {
	background:repeating-linear-gradient(-12deg,rgba(31,31,31,0.04),rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.04) 0.4em),repeating-linear-gradient(12deg,rgba(245,245,245,0.04),rgba(245,245,245,0.06) 0.2em,rgba(245,245,245,0.06) 0.2em,rgba(245,245,245,0.04) 0.4em),linear-gradient(to bottom right, rgba(63,191,191,0.167), rgba(255,255,255,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.333)),linear-gradient(to bottom left, rgba(63,191,191,0.167), rgba(255,255,255,0.1), rgba(63,191,191,0.1), rgba(63,191,191,0.1), rgba(63,191,191,0.333));
	box-shadow: 0 0.333em 0.15em 0.1em inset;
	border: 0.1em solid;
	border-radius:0.333em;
	overflow:hidden;
	width:260px;
	height:640px;
	position:fixed;
	z-index:-1;
	top:100%;
	display:none;
	box-sizing: border-box;
	will-change: transform, opacity;
}
/* PURSUIT ENGINE */
.pursuitNarratorFrame {
	/*opacity: 0;*/
	top: 33.33%;
	transform: translateY(-1em);
    position: relative;
    z-index: 18;
	width: 80%;
	left: 5%;
	padding: 2% 5%;
	border-radius: 8%;
    font-weight: 700;
    font-size: 115%;
    /*text-align: center;*/
	letter-spacing: 0.0333em;
	color: gold;
	/*border: 0.1em solid;*/
	text-shadow:0 0 0.15em black, 0 0 0.25em black, 0.1em 0.1em 0.1em black, -0.1em -0.1em 0.1em black, -0.1em 0.1em 0.1em black, 0.1em -0.1em 0.1em black;
	box-shadow: 0 0 0.05em 0.15em rgba(130,119,23,0.92), 0 0 0.25em 0.1em rgba(15,15,31,0.92), 0 0 0.25em 0.1em rgba(15,15,31,0.92) inset, 0.1em 0.1em 0.33em 0.1em black;
	/*background: linear-gradient(to bottom left,rgba(15,15,31,0.88),rgba(15,15,31,0.72),rgba(15,15,31,0.80));*/
	background: linear-gradient(to bottom, rgba(15,15,31,0.96), rgba(15,15,31,0.80),rgba(15,15,31,0.96));
	pointer-events: none;
	will-change: opacity;
}
.pursuitMainButton {
	z-index: 1000;
    position: absolute;
    width: 80%;
    left: 10%;
    top: 3.33%;
	font-size: 133%;
	will-change: opacity;
}

/* Description of items in SecretGarden */
.equipStyle {
	padding: 0 0 0 0;
    display: block;
    margin-bottom: 0.15em;
	font-weight: 700;
}

/* Trainer */
.timeBarSpacer {
	text-align:center;
	line-height: 1em;
    position: absolute;
    box-sizing: border-box;
	width: 25%;
	font-size:110%;
	color:whitesmoke;
	font-weight:700;
	text-shadow:0 0 0.25em black;
	border-right:0.15em solid rgba(31,31,31,0.5);
}
.stateStatsBar {
	border: 0.125em solid black;
    background: linear-gradient(to bottom,rgba(224,224,224 ,1),rgba(158,158,158,1),rgba(224,224,224 ,1),rgba(158,158,158 ,1));
    overflow: hidden;
	border-radius: 0.33em;
}

.choiceQuestion {
	margin: 0 0 1em 0;
	/*display:inline;*/
	display: inherit;
	will-change: opacity;
}

.choice, .choice1, .choice2, .choice3, .choice4, .choice5, .choice6, .choice7  {
	margin: 0 0 1.25em 0;
	border-radius:0.33em;
	box-shadow: 0 0 0.33em 0.15em rgba(0,0,0,0);
	will-change: opacity;
}
#endText, #endText1, #endText2, #endText3, #endText4, #endText5, #endText6, #endText7  {
	margin: 0 0 1.25em 0;
}

/**********************************************************/
/* Weather Panel */
#weatherLayer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
	display: none;
	overflow: hidden;
	opacity:0;
	pointer-events: none;
}

/**********************************************************/
/* Moving Message Box - not trigerred automatically, unlike messageBox */

.movingBox {
	margin: 0 20px 0 690px;
	position: fixed;
    top: 108%;
	max-width: 720px;
    box-shadow: 0em 0em 0.8em 0 rgba(213,0,0,1), 0em 0em 1.6em white, 0em 0em 2.4em white, 0em 0em 3.2em white;
    border-radius: 0.2em;
    z-index: 100;
    padding-bottom: 0.33em;
	border: 0.2em solid;
	box-sizing: border-box;
	opacity: 1;
	visibility: hidden;
	cursor: pointer;
	will-change: transform, opacity;	
}
.movingBoxTitle {
	font-family: Roboto Slab, Serif;
	font-size: 105%;
	font-weight: 700;
	display: block;
	text-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,0.4);
	padding-left: 0.33em;
	padding-top: 0.175em;
	padding-bottom: 0.125em;
	box-shadow: 0 0 0.05em 0.1em black, 0 0 0.1em 0 black inset;
}
.movingBoxText {
	padding: 0.33em;
}


/**********************************************************/
/* Equipment Stats */
.equipmentStatsHolder {
	background:linear-gradient(to top, rgba(127,127,127,0.1) -8%, rgba(127,127,127,0.25) 124%);
	font-size:92%;
	margin:0 0.5em 1.25em 0.5em;
	border-bottom:0.05em solid;
	border-left:0.05em solid;
	border-right:0.05em solid;
	border-radius:0 0 0.33em 0.33em;
	padding:0.33em 0 0.25em 0.5em;
	box-shadow: 0.05em 0.05em 0.33em 0.02em;
}

/* Descrpition of the links */
.linkDescription {
	background:linear-gradient(to top, rgba(127,127,127,0.1) -8%, rgba(127,127,127,0.25) 124%);
	font-size:92%;
	margin:0 0.5em 1.167em 0.5em;
	border-bottom:0.05em solid;
	border-left:0.05em solid;
	border-right:0.05em solid;
	border-radius:0 0 0.33em 0.33em;
	padding:0.33em 0.5em 0.25em 0.5em;
	box-shadow: 0.05em 0.05em 0.33em 0.02em;
	font-style: italic;
}

/**********************************************************/
/* Moving Message Box */

.messageBox {
	position: fixed;
    top: 120%;
    width: 66.7%;
    max-width: 715px;
    border: 0.2em solid;
    /*box-shadow: 0em 0em 0.8em dimGray, 0em 0em 1.6em white, 0em 0em 2.4em white, 0em 0em 3.2em white;*/
    border-radius: 0.2em;
    z-index: 100;
    padding-bottom: 0.33em;
    opacity: 1;
	cursor: pointer; 
}
.messageBoxTitle {
	font-family: Roboto Slab, Serif;
	font-size: 105%;
	font-weight: 700;
	display: block;
	text-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,0.4);
	padding-left: 0.33em;
	padding-top: 0.175em;
	padding-bottom: 0.125em;
	box-shadow: 0 0 0.05em 0.1em black, 0 0 0.1em 0 black inset;
}
.messageBoxText {
	padding: 0.33em;
}

/**********************************************************/
/* Icon pictures */
.iconBlack {
	height: 2.28571429em;
    width: 2.28571429em;
    float: left;
    margin-right: 0.25em;
	vertical-align: baseline;
	pointer-events: none;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}
.icon {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: baseline;
	pointer-events: none;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}
.iconButton {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: baseline;
	pointer-events: none;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}
.iconLink {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: baseline;
	pointer-events: none;
	cursor: pointer;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}
.iconDisabled {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: baseline;
	pointer-events: none;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}

/**********************************************************/
/* Introducing game concepts and messages */

.innerWindow {
	border: 0.15em solid;
	box-shadow: 0.1em 0.1em 0.25em 0.05em rgba(127,127,127,0.5);
	border-radius: 0.25em;
	display: inline-block;
	padding-bottom: 0.33em;
}
.innerWindowBlock {
	border: 0.15em solid;
	box-shadow: 0.1em 0.1em 0.25em 0.05em rgba(127,127,127,0.5);
	border-radius: 0.25em;
	display: block;
	padding-bottom: 0.33em;
}
.innerWindowTitle {
	font-family: Roboto Slab, Serif;
	font-size: 105%;
	font-weight: 700;
	background: linear-gradient(to top, rgba(127,127,127,0.1) -8%, rgba(127,127,127,0.33) 104%);
	border-bottom: 0.15em solid dimGray;
	display: block;
	padding-left: 0.33em;
	padding-top: 0.15em;
	padding-bottom: 0.15em;
	text-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,0.4);
	padding: 0.33em;
}
.innerWindowText {
	padding: 0.33em;
}
.innerWindowUnderTitle {
	font-family: Archivo Narrow, Sans-Serif;
	font-weight: 700;
	opacity: 0.8;
	font-size: 75%;
	text-align: center;
	padding: 0.33em;
	float: right;
	border: 0.15em solid rgba(127,127,127,0.5);
	margin: 0.15em;
	border-radius: 0.15em;
}

/* scenes pictures */
.scenePicture {
	width: 100%;
	border-radius: 0.33em;
	/*border: 0.15em solid;*/
	padding: 0.33em;
	box-sizing: border-box;
	background: white;
	box-shadow: 0 0 0.333em 0.1em rgba(95,63,0,1) inset, 0 0 0 1em rgba(15,0,0,1) inset, 0.05em 0.15em 0.25em 0.05em black;
	pointer-events: none;
	will-change: transform, opacity;
}

/**********************************************************/
/* UI Interface of the panels and cutscenes */

.innerPanel {
	width: 100%;
	box-sizing: border-box;
	margin: 0.33em auto;
	padding: 0.67em;
	background: 
	repeating-linear-gradient(-12deg,rgba(31,31,31,0.04),rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.04) 0.4em),
	repeating-linear-gradient(12deg,rgba(245,245,245,0.04),rgba(245,245,245,0.06) 0.2em,rgba(245,245,245,0.06) 0.2em,rgba(245,245,245,0.04) 0.4em),
	linear-gradient(to bottom right, rgba(63,191,191,0.167), rgba(255,255,255,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.333)),
	linear-gradient(to bottom left, rgba(63,191,191,0.167), rgba(255,255,255,0.1), rgba(63,191,191,0.1), rgba(63,191,191,0.1), rgba(63,191,191,0.333));
	border: 0.15em solid;
	border-radius: 0.33em;
	box-shadow: 0 0 0.15em 0.05em, 0 0 0.33em 0 inset;
	overflow: hidden;
	will-change: transform, opacity;
}
.darkGlass {
	width: 100%;
	box-sizing: border-box;
	margin: 0.33em auto;
	padding: 0.67em;
	background:
	repeating-linear-gradient(-6deg,rgba(31,31,31,0.08),rgba(31,31,31,0.12) 0.14em,rgba(31,31,31,0.12) 0.16em,rgba(31,31,31,0.08) 0.266em),
	repeating-linear-gradient(6deg,rgba(31,31,31,0.08),rgba(31,31,31,0.12) 0.14em,rgba(31,31,31,0.12) 0.16em,rgba(31,31,31,0.08) 0.266em),
	linear-gradient(to bottom right, rgba(63,127,127,0.2), rgba(255,255,255,0.1), rgba(63,127,127,0.25), rgba(63,127,127,0.1), rgba(63,127,127,0.333)),
	linear-gradient(to bottom, rgba(63,127,127,0.333), rgba(63,127,127,0.167), rgba(255,255,255,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.333)),
	linear-gradient(to right, rgba(127,127,127,0.333), rgba(245,245,245,0.8), rgba(245,245,245,0.6), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(127,127,127,0.5));
	border: 0.15em solid;
	border-radius: 0.33em;
	box-shadow: 0 0 0.15em 0.05em, 0 0 0.33em 0 inset;
	overflow: hidden;
	will-change: transform, opacity;
}
.cutscenePanel {
	width:100%;
	position:absolute;
	padding:0;
	margin:0;
	border-top:0.15em solid;
	border-bottom:0.15em solid;
	border-radius:0;
	height: 80%;
	font-size:104%;
	bottom:2%;
	left:0;
	right:0;
	box-sizing: border-box;
    box-shadow: 0 0 0.33em inset, 0 0 0.33em;
	border: 0.15em solid;
}
.cutscenePicture {
	float: right;
	height: 100%;
	max-height: 75%;
	margin-left: 0.67em;
	margin-bottom: 0.67em;
	box-shadow: 0 0 0.33em 0.1em;
    border-radius: 0.33em;
}
.cutsceneSlide {
	display: inherit;
	opacity: 1;
    position: absolute;
    top: 2.5em;
    left: 0.4em;
    right: 0.4em;
    border: none;
    height: 72%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    background: none;
	padding: 0.25em;
}

/**********************************************************/
/* UI Interface of the fight */

.UIButtonsBar {
	display: flex;
	width: 100%;
	margin-top: 0.667em;
	margin-bottom: 0.667em;
}
.UIPlayerStatusBar {
	padding: 0 2%;
	text-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,0.4);
	line-height: 200%;
}
.UIPlayerStatus {
	display: inline-block;
	font-weight: 700;
	margin: 0 0.5em 0 0;
	position: absolute;
}
.UIButton {
	display: inherit;
    padding: 0 1%;
    width: 31.33%;
    margin-left: 0;
    margin-right: 0;
}
/*2 buttons only*/
.UIButtonDuo {
	display: inherit;
    padding: 0;
	margin: auto;
    width: 45%;
}
.UITextBar {
	display: inline-block;
	text-shadow: 0.15em 0.15em 0.4em rgba(0,0,0,0.8);
	position: relative;
}
.UIFloatBar {
    position: relative;
    font-weight: 700;
    border-top: 0.15em solid;
    display: block;
    margin-top: 0.75em;
    padding-top: 0.15em;
}
.UIWarningText {
	font-weight: 700;
	color: crimson;
	position: absolute;
}
.UIstatsBar {
	height: 1.08em;
	/*border: 0.15em solid rgba(31,31,31,0.8);*/
	padding: 0;
	box-shadow: 0 0 0.1em 0.1em black, 0 0 0.1em 0.05em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0em 0.1em 0.05em rgba(31,31,31,0.84) inset;
	background: linear-gradient(to right, rgba(245,245,245, 0.33) -8%, rgba(105,105,105, 0.33) 104%);
	border-radius: 0.33em;
	width: 25%;
	margin: 0.25em 0;
	box-sizing: border-box;
	will-change: transform;
}

/*************************a*********************************/
/* Interactive Combat Bars */

.statsContainer {
	height: 1.2em;
	position: relative;
    margin: 0.15em auto .33em auto;
}
.statsBar {
	height: 1.05em;
	border: 0.15em solid rgba(31,31,31,0.8);
	box-shadow: 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33);
	background: linear-gradient(to right, rgba(245,245,245, 0.33) -8%, rgba(105,105,105, 0.33) 104%);
	border-radius: 0.33em;
	width: 100%;
	margin: auto;
	position: absolute;
	will-change: transform;
}
.statsBarSpacers {
	border-right: 0.15em solid rgba(31,31,31,0.5);
	line-height: 1.15em;
	color: rgba(0,0,0,0);
	text-shadow: none;
	position: absolute;
	box-sizing: border-box;
}
.statsBarContainer {
	overflow:hidden;
	box-shadow:0 0 0.1em 0.1em black, 0 0 0.1em 0.05em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.125em 0.125em black inset;
	height: 1.5em;
	position: relative;
	border-radius: 0.167em;
	margin-bottom:0.5em;
	background: repeating-linear-gradient(-12deg,rgba(31,31,31,0.12),rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.12) 0.4em),
	repeating-linear-gradient(12deg,rgba(31,31,31,0.12),rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.12) 0.4em);
}
.statsBarText {
    color: whitesmoke;
    opacity: 0.92;
    text-shadow: 0.1em 0.1em 0.05em black, -0.1em 0em 0.05em black, 0.05em 0.05em 0.1em black, -0.05em -0.05em 0.1em black, -0.05em 0.05em 0.1em black, 0.05em -0.05em 0.1em black;
    line-height: 1em;
    vertical-align: top;
    padding-left: 0.15em;
    padding-top: 0.05em;
	position: absolute;
	left: 1.75em;
	top: 0.2em;
	pointer-events: none;
}
.statsBarIcon {
	height:1.5em;
	width:1.5em;
	left: 0em;
	position: absolute;
	pointer-events: none;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0 black inset;
	background:rgba(0,0,0,0.5);
}


.enduranceStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(21,101,192,0.2),rgba(21,101,192,0.06) 0.1em,rgba(21,101,192,0.09) 0.1em,rgba(21,101,192,0.2) 0.2em);
}
#enduranceStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), rgba(21,101,192 ,1), rgba(0,0,0,0), rgba(30,136,229 ,1), #333333), /* blue 800 600 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgba(21,101,192 ,1),rgba(30,136,229 ,1));
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.cunningStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(0,105,92,0.2),rgba(0,105,92,0.06) 0.1em,rgba(0,105,92,0.09) 0.1em,rgba(0,105,92,0.2) 0.2em); /* teal 800 */
}
#cunningStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), #00695C, rgba(0,0,0,0), #00897B, #333333), /* teal 800  600 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,#00695C,#00897B);
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.willpowerStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(198,40,40,0.2),rgba(198,40,40,0.06) 0.1em,rgba(198,40,40,0.09) 0.1em,rgba(198,40,40,0.2) 0.2em);
}
#willpowerStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), #c62828, rgba(0,0,0,0), #e53935, #333333), /* red 800  600 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,#c62828,#e53935);
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.lustStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(173,20,87,0.2),rgba(173,20,87,0.06) 0.1em,rgba(173,20,87,0.09) 0.1em,rgba(173,20,87,0.2) 0.2em); /* pink 800 */
}
#lustStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), #AD1457, #D81B60, rgba(127,127,127,0.5)),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,#AD1457,#D81B60);
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.staminaStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(0,105,92,0.2),rgba(0,105,92,0.06) 0.1em,rgba(0,105,92,0.09) 0.1em,rgba(0,105,92,0.2) 0.2em); /* teal 800 */
}
#staminaStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), #00695C, #00897B, rgba(127,127,127,0.5)),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,#00695C,#00897B);
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.transformationStatsBarContainer {
	background: repeating-linear-gradient(12deg,rgba(216,27,96,0.36),rgba(216,27,96,0.12) 0.15em,rgba(216,27,96,0.12) 0.15em,rgba(216,27,96,0.36) 0.3em), rgba(0,0,0,0.1);
}
#transformationStatsBar {
	border-radius:0;	
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(12deg,rgba(31,31,31,0.24),rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.24) 0.3em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.667), rgba(173,20,87 ,1), rgba(216,27,96 ,1), rgba(255,255,255,0), #333333), /* pink 800 600 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgba(173,20,87 ,1),rgba(216,27,96 ,1));
	
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.paragonStatsBarContainer {
	background: repeating-linear-gradient(12deg,rgba(21,101,192,0.36),rgba(21,101,192,0.12) 0.15em,rgba(21,101,192,0.12) 0.15em,rgba(21,101,192,0.36) 0.3em), rgba(0,0,0,0.1);
}
#paragonStatsBar {
	border-radius:0;	
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(12deg,rgba(31,31,31,0.24),rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.24) 0.3em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.667), rgba(21,101,192 ,0.333), #1E88E5, rgba(255,255,255,0), #333333),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgba(21,101,192 ,0.333),#1E88E5);
	
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.renegadeStatsBarContainer{
	background: repeating-linear-gradient(12deg,rgba(198,40,40,0.36),rgba(198,40,40,0.12) 0.15em,rgba(198,40,40,0.12) 0.15em,rgba(198,40,40,0.36) 0.3em), rgba(0,0,0,0.1);
}
#renegadeStatsBar {
	border-radius:0;	
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(12deg,rgba(31,31,31,0.24),rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.24) 0.3em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.667), #c62828, #e53935, rgba(255,255,255,0), #333333),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,#c62828,#e53935);
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.distanceStatsBarContainer {
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.667), rgba(0,0,0,0), rgba(0,0,0,0), #333333),
	repeating-linear-gradient(-12deg,rgba(31,31,31,0.333),rgba(31,31,31,0.2) 0.1em,rgba(31,31,31,0.2) 0.1em,rgba(31,31,31,0.333) 0.2em), linear-gradient(-12deg,rgba(0,200,83 ,1), rgba(100,221,23 ,1), rgba(255,214,0 ,1), rgba(221,44,0 ,1), rgba(213,0,0,1)); /* red 800 */
}
#distanceStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0), rgba(245,245,245,0.75), rgba(0,0,0,0), rgba(0,0,0,0), #333333),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.25), rgba(245,245,245,.16), rgba(245,245,245,.09), rgba(245,245,245,0.25)),
	linear-gradient(to bottom right,rgba(128,222,234 ,0.75), rgba(0,188,212 ,0.333),rgba(128,222,234 ,0.75));
	width:4%;
	border-radius:20%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.1em black inset, 0 0 0.5em 0 white inset;
	will-change: transform;
}

/* CHEST UNLOCK */
.unlockProgressStatsBarContainer {
	background: repeating-linear-gradient(12deg,rgba(96,125,139,0.36),rgba(96,125,139,0.12) 0.15em,rgba(96,125,139,0.12) 0.15em,rgba(96,125,139,0.36) 0.3em), rgba(0,0,0,0.1);
}
.unlockProgressStatsBar {
	border-radius:0;	
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(12deg,rgba(31,31,31,0.24),rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.24) 0.3em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.667), rgba(96,125,139,1), rgba(55,71,79 ,1), rgba(255,255,255,0), #333333), /* blue steel 600 800 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgba(96,125,139,1),rgba(55,71,79 ,1));
	
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}
.trapTriggerStatsBarContainer {
	background: repeating-linear-gradient(12deg,rgba(244,81,30,0.36),rgba(244,81,30,0.12) 0.15em,rgba(244,81,30,0.12) 0.15em,rgba(244,81,30,0.36) 0.3em), rgba(0,0,0,0.1);
}
.trapTriggerStatsBar {
	border-radius:0;	
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(12deg,rgba(31,31,31,0.24),rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.24) 0.3em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.667), rgba(244,81,30 ,1), rgba(216,67,21 ,1), rgba(255,255,255,0), #333333), /* orange 600 800 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgba(244,81,30 ,1),rgba(216,67,21 ,1));
	
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}
.timingStatsBarContainer {
	background:
	
	linear-gradient(to left,
	rgba(0,188,212,0.667),rgba(38,198,218 ,0.667),rgba(128,222,234 ,0.667),rgba(128,222,234 ,0.667),rgba(178,235,242 ,0.667),rgba(178,235,242 ,0.667),rgba(178,235,242 ,0.667),
	rgba(213,0,0,0.25), rgba(213,0,0,0.333) ,rgba(213,0,0 ,0.667) ,rgba(213,0,0,0.333) ,rgba(213,0,0,0.25),
	rgba(178,235,242 ,0.667),rgba(178,235,242 ,0.667),rgba(178,235,242 ,0.667),rgba(128,222,234 ,0.667),rgba(128,222,234 ,0.667),rgba(38,198,218 ,0.667),rgba(0,188,212,.667)),
	
	linear-gradient(to bottom, rgba(245,245,245,0.333),rgba(245,245,245,0.75),       rgba(255,255,255,0.88), rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0), rgba(0,0,0,0.88),   rgba(31,31,31 ,0.75),rgba(31,31,31,0.333)),
	repeating-linear-gradient(-12deg,rgba(31,31,31,0.6),rgba(31,31,31,0.3) 0.1em,rgba(31,31,31,0.3) 0.1em,rgba(31,31,31,0.6) 0.2em);
}
.timingStatsBar {
	position: absolute;
	margin:0;
	height: 1.5em;
	will-change: transform;
	width:0;
	box-shadow:0 0 0.5em 0.2em rgba(0,0,0,0.88);
}
/* CHEST UNLOCK END */

.percentsBar {
	overflow:hidden;
	height: 1.25em;
	font-weight:700;
	display: flex;
	width: 100%;
	margin-bottom: 0.5em;
	background: repeating-linear-gradient(6deg,rgba(31,31,63,0.04),rgba(31,31,63,0.1) 0.2em,rgba(31,31,63,0.1) 0.2em,rgba(31,31,63,0.04) 0.4em),linear-gradient(to left, rgba(245,245,245, 0.2), rgba(245,245,245, 0.1));
	border-radius: 0.167em;
}

/**********************************************************/
/* title fonts and body text */

.actTitle {
	font-family: Oranienbaum, Serif;
	font-weight: 400;
	font-size: 240%;
	text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.167), 0.06em 0.12em 0.33em rgba(0,0,0,0.4);
	position: relative;
}
h2 {
	display: inline-block;
	font-family: Roboto Slab, Serif;
	font-weight: 700;
	font-size: 150%;
	line-height: 133%;
	text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.133), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
	margin: 0.5em 0 0.15em 0;
	position: relative;
	will-change: opacity;
}
h3 {
	display: inline-block;
    font-family: Roboto Slab, Serif;
    font-weight: 700;
    font-size: 133%;
    line-height: 125%;
    text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.133), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
    margin: 0.4em 0 0.125em 0;
    position: relative;
	will-change: opacity;
}
h4 {
	display: inline-block;
	font-family: Roboto Slab, Serif;
	font-weight: 700;
	font-size: 110%;
	line-height: 100%;
	border-bottom: 0.125em solid;
	text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.133), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
	position: relative;
	margin: 0.33em 0 0.5em 0;
	padding-bottom: 0.2em;
	will-change: opacity;
}
h5 {
	display: inline-block;
    font-size: 100%;
    font-weight: 700;
    margin: 0em;
    text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.133), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
	will-change: opacity;
}
.title {
	font-family: Roboto Slab, Serif;
}
.mainChoice {
	font-size: 166.67%;
    position: relative;
    background: none;
    border: none;
    box-shadow: none;
    margin-bottom: 1.25em;
    display: block;
    text-align: center;
}
.mainChoice:hover {
	background: none;
	text-decoration: underline;
}

/**********************************************************/
/* standard formats of the story  */

html {
	color: black;
	overflow-x: hidden;
	/*background-repeat: no-repeat;*/
	min-height: 100%;
	background: repeating-linear-gradient(-30deg,rgba(31,31,31,0.00),rgba(31,31,31,0.012) 0.15em,rgba(31,31,31,0.015) 0.15em,rgba(31,31,31,0.00) 0.3em), repeating-linear-gradient(30deg,rgba(31,31,31,0.00),rgba(31,31,31,0.012) 0.15em,rgba(31,31,31,0.015) 0.15em,rgba(31,31,31,0.00) 0.3em);
}
body {
	font-weight: 400;
	font-size: 19px;
	color: black;
	cursor: default;
	text-shadow: 0.06em 0em 0.18em rgba(31,31,31,0.105), -0.06em 0em 0.18em rgba(31,31,31,0.105), 0em 0.06em 0.18em rgba(31,31,31,0.105), 0em -0.06em 0.18em rgba(31,31,31,0.105);
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0em;
	-webkit-user-select: none;   
  	-khtml-user-select: none;    
  	-moz-user-select: none;       
  	-ms-user-select: none;
	user-select: none;
}
/* Passage styling. */
.passage-in {
	opacity: 0;
}
.passage {
	line-height: 1.33;
    text-align: inherit;
}
/*.transition-in {
	position:absolute;
	opacity:0;
}
.transition-out {
	position:absolute;
	opacity:0;
}*/

#story-caption {
	line-height: 150%;
	margin-bottom: 0.1em;
}
.gameInfoMobile {
	display: none;
}

#gameInfoDiv {
	font-size: 320%;
}

/********************************************************/
/* init-screen */
#init-screen p { display: none;  }
#init-loading progress {  } /* fixes a rendering bug in Chrome on certain platforms */
html.init-no-js #init-screen, html.init-lacking #init-screen, html.init-loading #init-screen { display: block; }
html.init-no-js #init-no-js { display: block; }
html.init-lacking #init-lacking { display: block; }
html.init-loading #init-loading { display: block; }
html.init-loading #ui-bar, html.init-loading #passages { display: none; }
html.init-no-js #init-no-js, noscript { color: red; font-weight: bold; }
#init-screen {
	z-index: 1000;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0em;
	top: 0em;
	text-align: center;
	font-weight: 700;
	font-style: normal;
	background: antiquewhite;
	border: none;
	margin: auto;
	font-size: 120%;
}

/****************************************************/
/* color of links and buttons */
a {
	font-weight: 700;
    text-shadow: 0.05em 0.05em 0.05em rgba(127,127,127,0.5);
    box-shadow: 0.1em 0.25em 0.5em 0.01em rgba(0,0,0,0.8), 0em 0em 0.15em 0.08em inset;
    display: block;
    padding: 0.25em 0.5em 0.25em 0.5em;
    border: 0.12em solid rgba(63,63,63,0.8);
    border-radius: 0.333em;
    background: radial-gradient( circle, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.1)),
				repeating-linear-gradient(15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.006) 0.33em,rgba(31,31,31,0.012) 0.33em,rgba(31,31,31,0.00) 0.66em),
				repeating-linear-gradient(-15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.006) 0.33em,rgba(31,31,31,0.012) 0.33em,rgba(31,31,31,0.00) 0.66em),
				linear-gradient(to bottom, rgba(191,191,191,0.16) -8%, rgba(191,191,191,0.3) 104%);
    cursor: pointer;
	text-decoration: initial;
	will-change: opacity;
}
a:hover {
	background: repeating-linear-gradient(15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.004) 0.33em,rgba(31,31,31,0.008) 0.33em,rgba(31,31,31,0.00) 0.66em),
				repeating-linear-gradient(-15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.014) 0.33em,rgba(31,31,31,0.008) 0.33em,rgba(31,31,31,0.00) 0.66em),
				linear-gradient(to bottom, rgba(191,191,191,0.12) -8%, rgba(191,191,191,0.24) 104%);
}
.disabled {
	color: dimGray;
	font-weight: 700;
    text-shadow: 0.05em 0.05em 0.05em rgba(127,127,127,0.5);
    box-shadow: 0.1em 0.25em 0.5em 0.01em rgba(63,63,63,0.67), 0em 0em 0.15em 0.08em dimGray inset;
    display: block;
    padding: 0.25em 0.5em;
    border: 0.1em solid rgba(127,127,127,1);
    border-radius: 0.25em;
    background: repeating-linear-gradient(15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.004) 0.33em,rgba(31,31,31,0.008) 0.33em,rgba(31,31,31,0.00) 0.66em),
				repeating-linear-gradient(-15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.014) 0.33em,rgba(31,31,31,0.008) 0.33em,rgba(31,31,31,0.00) 0.66em),
				linear-gradient(to bottom, rgba(127,127,127,0.12) -8%, rgba(127,127,127,0.24) 104%);
	cursor: not-allowed;
	will-change: opacity;
	padding-left: 0.667em;
}
input, textarea, input:focus, input:hover, textarea:focus, textarea:hover {
	font-family: Roboto Slab, Serif;
	background-color: rgba(0,0,0,0.05);
	border: 0.1em solid rgba(31,31,31,0.8);;
	box-shadow: 0.2em 0.2em 0.33em rgba(63,63,63,0.75);
	font-weight: 700;
}
select {
    border: 0.1em solid;
	border-radius: 0.15em;
	text-shadow: 0em 0em 0.1em rgba(63,63,63,0.25);
	background-color: rgba(127,127,127,0.12);
	font-size: 112%;
	font-family: Archivo Narrow;
	padding: 0.25em;
	cursor: pointer;
	font-weight: 700;
}
select :hover {
}
input[type=text], textarea {
	min-width: 0;
    width: 48%;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    padding: 0.15em;
    font-size: 112%;
}
button {
	font-family: Roboto Slab, Serif;
	border: 0.1em solid black;
	text-shadow: 0.05em 0.05em 0.2em black, -0.05em 0em 0.2em black;
	box-shadow: 0.05em 0.10em 0.15em 0.075em rgba(0,0,0,0.667), 0 0 0.1em 0.02em rgba(0,0,0,0.5), 0em 0em 0.15em 0.1em black inset;
	border-radius: 0.333em;
	color: whitesmoke;
	padding: 0.36em 0.4em;
	width: 100%;
    font-size: 100%;
	cursor: pointer;
	will-change: opacity;
}
button:hover {
}
button:disabled {
	background: linear-gradient(to right, #f5f5f5 -0.4em, rgba(245,245,245,0) 0.4em),linear-gradient(to left, #f5f5f5 -0.4em, rgba(245,245,245,0) 0.4em),linear-gradient(to top, black -0.4em, rgba(31,31,31,0) 0.4em),repeating-linear-gradient(15deg,rgba(0,0,0,0.12),rgba(0,0,0,0.08) 0.25em,rgba(0,0,0,0.08) 0.25em,rgba(0,0,0,0.10) 0.6em),linear-gradient(to bottom, rgba(245,245,245,0.5), rgba(31,31,31,0.24), dimGray, gray, rgba(31,31,31,0.24), rgba(31,31,31,0.3)),linear-gradient(to bottom, dimGray, gray);
	box-shadow: 0.055em 0.10em 0.1em 0.07em rgba(0,0,0,0.5), 0.025em 0.075em 0.1em 0 rgba(0,0,0,0.333), 0em 0em 0.15em 0.1em black inset;
	border-radius: 0.333em;
	padding: 0.36em 0.4em;
	opacity: 1;
	cursor: not-allowed;
	border: 0.1em solid black;
	will-change: opacity;
}
button:disabled:hover {
	background: linear-gradient(to right, #f5f5f5 -0.4em, rgba(245,245,245,0) 0.4em),linear-gradient(to left, #f5f5f5 -0.4em, rgba(245,245,245,0) 0.4em),linear-gradient(to top, black -0.4em, rgba(31,31,31,0) 0.4em),repeating-linear-gradient(15deg,rgba(0,0,0,0.12),rgba(0,0,0,0.08) 0.25em,rgba(0,0,0,0.08) 0.25em,rgba(0,0,0,0.10) 0.6em),linear-gradient(to bottom, rgba(245,245,245,0.5), rgba(31,31,31,0.24), dimGray, gray, rgba(31,31,31,0.24), rgba(31,31,31,0.3)),linear-gradient(to bottom, dimGray, gray);
	opacity: 1;
	cursor: not-allowed;
	border: 0.1em solid black;
}
button:enabled:active {
	transform: translateX(0.015em) translateY(0.075em);
	box-shadow: 0.02em 0.02em 0.05em 0.03em rgba(0,0,0,0.8), 0em 0em 0.15em 0.1em black inset;	
	border: 0.1em solid black;
}
button, a {
    outline: none;
}
.fa-button {
    width: 1.28571429em;
    height: 1.28571429em;
    text-align: center;
	vertical-align: baseline;
	margin-bottom: -0.15em;
}
/*********** Selection menu   ****************************/
.playCondition {
	font-size:1.12em;
	font-weight:700;
	padding:0.25em 0.33em 0.125em 0.33em;
	box-shadow:0 0 0.1em 0, 0 0 0.1em 0 inset;
	margin:0.25em 0;
	background: repeating-linear-gradient(-15deg,rgba(0,0,0,0.06),rgba(0,0,0,0.04) 0.25em,rgba(0,0,0,0.04) 0.25em,rgba(0,0,0,0.06) 0.5em), linear-gradient(to bottom right, rgba(0,0,0,0.20), rgba(0,0,0,0.04), rgba(0,0,0,0.04), rgba(0,0,0,0.04), rgba(0,0,0,0.20));
	font-style: normal;
}
.textSymbol {
	display:inline-block;
	/*vertical-align: text-top;*/
}
.bigIcon {
	height: 1.5em;
    width: 1.5em;
    /* position: absolute; */
    float: left;
    margin: -0.15em 0.15em;
}
/********************************************************/
/* ui bar stuff */


/*#ui-bar-body {
	margin: 0em 0.33em 0em 0.33em;
}*/
.ui-bar-button {
	display: inherit;
	margin: 1.2em 0.33em;
	will-change: transform, opacity;
}
/*#ui-bar-toggle {
	display: none;
}
#ui-bar-history {
	margin-bottom: 0.25em;
	display: flex;
}
#history-forward {
	font-family: tme-fa-icons;
	float: right;
	margin-right: 0.67em;
	width: 30%;
	margin-left: auto;
	text-shadow: 0.15em 0.15em 0.33em rgba(0,0,0,0.33);
	box-shadow: 0.15em 0.15em 0.33em rgba(0,0,0,0.33);
}
#history-backward {
	font-family: tme-fa-icons;
	float: left;
	margin-left: 0.67em;
	width: 30%;
	margin-right: auto;
	text-shadow: 0.15em 0.15em 0.33em rgba(0,0,0,0.33);
	box-shadow: 0.15em 0.15em 0.33em rgba(0,0,0,0.33);
}*/



/********************************************************/
/* ui dialog stuff */
/***********************************************************************************************************************
 *
 * ui-dialog.css
 *
 * Copyright © 2015–2016 Thomas Michael Edwards <tmedwards@motoslave.net>. All rights reserved.
 * Use of this source code is governed by a Simplified BSD License which can be found in the LICENSE file.
 *
 **********************************************************************************************************************/

/*
	Patches to the core styles.
*/
html.ui-dialog-open body {
	overflow: hidden;
}

/*
	We do not animate `#ui-dialog:not(.open)` for various reasons.  Chief among
	them, however, is so that the dialog isn't in the middle of its animation
	when other page updates happen.

	e.g. The restoration of `overflow` on `body` would cause the still animating
	     dialog to jump around a little if a scrollbar were to pop in.

	     Any dialog action which performs a task which has its own animations
	     (e.g. passage display) or causes the page to reload in addition to
	     closing the dialog could cause display shenanigans.
*/

#ui-dialog-titlebar {
	position: relative;
}

/*
	Default appearance styles.
*/
#ui-overlay {
	background-color: #000;
}
#ui-overlay.open {
	opacity: 0.8;
	visibility: visible;
	transition: opacity 333ms ease-in;
}
#ui-overlay:not(.open) {
	transition: visibility 333ms step-end, opacity 333ms ease-in;
}
#ui-overlay {
	visibility: hidden;
	opacity: 0;
	z-index: 1000;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

#ui-dialog.open {
	opacity: 1;
	display: block;
	transition: opacity 333ms ease-in;
}
#ui-dialog-titlebar {
	background-color: #444;
}
#ui-dialog-close {
	cursor: pointer;
	font-size: 120%;
	margin: 0;
	padding: 0;
	width: 3.6em;
	height: 92%;
	background-color: transparent;
	border: 0.1em solid transparent;
	transition-duration: 333ms;
}
#ui-dialog-close:hover {
	background: repeating-linear-gradient(45deg,rgba(0,0,0,0.15),rgba(0,0,0,0.2) 0.2em,rgba(0,0,0,0.25) 0.2em,rgba(0,0,0,0.15) 0.4em), repeating-linear-gradient(-45deg,rgba(255,255,255,0.06),rgba(255,255,255,0.12) 0.2em,rgba(255,255,255,0.15) 0.2em,rgba(255,255,255,0.06) 0.1em);
	background-color: #b44;
	border-color: #d66;
}

/* List-based dialog styling (primarily for the Rewind & Share dialogs). */
#ui-dialog-body.list {
	padding: 0;
	min-width: 10em;
}
#ui-dialog-body.list ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0.1em solid transparent;
}
#ui-dialog-body.list li {
	margin: 0;
}
#ui-dialog-body.list li:not(:first-child) {
	border-top: 0.1em solid #444;
}
#ui-dialog-body.list li a {
	display: block;
	padding: 0.25em 0.75em;
	border: 0.1em solid transparent;
	color: #eee;
	text-decoration: none;
}
#ui-dialog-body.list li a:hover {
	background-color: #333;
	border-color: #eee;
}

/* Saves dialog styling. */
#ui-dialog-body.saves {
	padding: 0 0 0.1em; /* Webkit/Blink need 1px bottom padding or they'll trigger the scroll bar */
}
#ui-dialog-body.saves > *:not(:first-child) {
	border-top: 0.1em solid #444;
}
#ui-dialog-body.saves tr:not(:first-child) {
	border-top: 0.1em solid #444;
}
#ui-dialog-body.saves td {
	padding: 0.33em 0.33em;
}
#ui-dialog-body.saves td:first-child {
	min-width: 1.5em;
	text-align: center;
}
#ui-dialog-body.saves td:nth-child(3) {
	line-height: 1.2;
}
#ui-dialog-body.saves td:last-child {
	text-align: right;
}
#ui-dialog-body.saves .datestamp {
	font-size: 75%;
}
#ui-dialog-body.saves ul.buttons li {
	padding: 0.4em;
}
#ui-dialog-body.saves ul.buttons li:last-child {
	/*
		Using `position:absolute;right:0;` here can produce poor results,
		so we use `float:right` instead.
	*/
	float: right;
}

/* Settings dialog styling. */
/*#ui-dialog-body.settings div[id|="setting-body"] + div[id|="setting-body"] {
	margin: 0.5em 0;
}
#ui-dialog-body.settings [id|="setting-control"] {
	white-space: nowrap;
}
#ui-dialog-body.settings button[id|="setting-control"] {
	color: #eee;
	background-color: transparent;
	border: 0.1em solid #444;
	padding: 0.4em;
}
#ui-dialog-body.settings button[id|="setting-control"]:hover {
	background-color: #333;
	border-color: #eee;
}
#ui-dialog-body.settings button[id|="setting-control"].enabled {
	background-color: #282;
	border-color: #4a4;
}
#ui-dialog-body.settings button[id|="setting-control"].enabled:hover {
	background-color: #4a4;
	border-color: #6c6;
}*/

/* Share dialog styling. */
#ui-dialog-body.share {
	/*min-width: 140px;*/
}
#ui-dialog-close {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	white-space: nowrap;
}
/* Stop text selection on certain UI elements. */
#ui-dialog-close,
#ui-dialog-body.list a,
#ui-dialog-body.settings span[id|="setting-input"] {
	user-select: none;
}
/*
	Default font icon styles.
*/
#ui-dialog-close,
#ui-dialog-body.saves button[id="saves-export"]:before,
#ui-dialog-body.saves button[id="saves-import"]:before,
#ui-dialog-body.saves button[id="saves-clear"]:before,
#ui-dialog-body.settings button[id|="setting-control"]:after,
#ui-dialog-body.settings button[id|="setting-control"].enabled:after {
	font-family: "tme-fa-icons";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	speak: none;
}
#ui-dialog-body.saves button[id="saves-export"]:before {
	content: "\e829\00a0";
}
#ui-dialog-body.saves button[id="saves-import"]:before {
	content: "\e82a\00a0";
}
#ui-dialog-body.saves button[id="saves-clear"]:before {
	content: "\e827\00a0";
}
#ui-dialog-body.settings button[id|="setting-control"]:after {
	content: "\00a0\00a0\e830";
}
#ui-dialog-body.settings button[id|="setting-control"].enabled:after {
	content: "\00a0\00a0\e831";
}

#ui-dialog {
	box-shadow: 0.5em 0.5em 4em 0.1em gray, -0.5em -0.5em 4em 0.1em gray;
    min-width: 24%;
	max-width: 92%; 
	display: none;
	opacity: 0;
	z-index: 10000;
	position: fixed;
	top: 2em;
	margin: 0em;
	padding: 0em;
	border-radius: 0em 0em 0.33em 0.33em;
	border: 0.15em solid rgba(63,63,63,0.33);
}
#ui-dialog-titlebar {
	border-bottom: 0.15em solid rgba(31,31,31,0.8);
	padding: 0em;
	width: 100%;
}
#ui-dialog-title {
	margin: 0;
	padding: 0.175em 0.175em 0.175em 0.175em;
    background: rgba(0,0,0,0.5);
    color: whitesmoke;
    text-align: inherit;
	font-size: 1.5em;
}
#ui-dialog-close {
	color: whitesmoke;
	margin: 0.15em;
	box-shadow: none;
	background: none;
	height: 84%;
}
#ui-dialog-body {
	min-width: 280px;
	background-color: rgba(255,255,255,0.8);
	border: 0em solid rgba(127,127,127,0.33);
	text-align: left;
	line-height: 1.44;
	padding: 0em;
	font-weight: 700;
	color: black;
	border-radius: 0em 0em 0.33em 0.33em;
	background: repeating-linear-gradient(-30deg,rgba(31,31,31,0),rgba(31,31,31,.04) 0.15em,rgba(31,31,31,.04) 0.15em,rgba(31,31,31,0) 0.3em), repeating-linear-gradient(30deg,rgba(31,31,31,0),rgba(31,31,31,.04) 0.15em,rgba(31,31,31,.04) 0.15em,rgba(31,31,31,0) 0.3em), rgba(255,255,255,0.8);
}
#ui-dialog-body > *:first-child {
	margin-top: 0;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0em 0.67em;
}
#ui-dialog-body hr {
	background-color: #444;
}
/* Settings dialog styling. */
#ui-dialog-body.settings [id|="setting-body"] {
	display: table;
	width: 100%;
	border-spacing: 0.25em 0.2em;
}
#ui-dialog-body.settings [id|="setting-label"] {
	display: table-cell;
	padding: 0.5em 0.25em 0.5em 0.5em;
}
#ui-dialog-body.settings [id|="setting-label"] + div {
	display: table-cell;
	min-width: 8em;
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
}

/* Default dialog button bar styling. */
#ui-dialog-body ul.buttons {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}
#ui-dialog-body ul.buttons li {
	font-size: 108%;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
html.ui-dialog-open body {
    overflow: initial;
}
#ui-dialog-body.restart>:first-child {
	padding: 2%;
	width:96%;
	margin: auto;
}
#ui-dialog-body.saves .empty {
	color: black;
}
#ui-dialog-body ul.buttons>li+li>button {
	margin-left: auto;
}
#ui-dialog-body.saves ul.buttons li {
    display: inline-flex;
    margin-left: 2%;
    margin-right: 2%;
    width: 100%;
}
#ui-dialog-body.saves tr:not(:first-child) {
    border-top: 0.1em solid #444;
}
#ui-dialog-body.saves tr:first-child {
    display: none;
}
#ui-dialog-body.saves ul.buttons li:last-child {
    display: none;
}
#ui-dialog-body.saves td:first-child {
	min-width: 0.1em;
}
#ui-dialog-body.saves td:nth-child(3) {
	font-size: 88%;
}
#ui-dialog-body.saves>:not(:first-child) {
	padding-top: 0.33em;
	padding-bottom: 0.33em;
	margin: 0.05em;
	display: flex;
}
#ui-dialog-body.settings button[id|=setting-control].enabled {
	background: none;
	background-color: #1B5E20;
	border-color: black;
	color: whitesmoke;
}
#ui-dialog-body.settings button[id|=setting-control].enabled:hover {
	background: none;
	background-color: #43A047;
	border-color: whitesmoke;
	color: whitesmoke;
}
#ui-dialog-body.settings button[id|=setting-control] {
	background: none;
	background-color: #B71C1C;
	border-color: black;
	width: initial;
	color: whitesmoke;
}
#ui-dialog-body.settings button[id|=setting-control]:hover {
	background: none;
	background-color: #E53935;
	border-color: whitesmoke;
	color: whitesmoke;
}

#ui-bar-image-container {
	position: absolute;
	/*left:10px;*/
	right: 10px;
	z-index: -1;
	margin: auto;
	width: 92%;
	height: 92%;
	opacity: 0.333;
	max-width: 300px;
	will-change: transform, opacity;
}
/********************************************************/
/* responsive stuff */
#story {
	margin: 0 20px 0 690px;
	padding-top: 0.5em;
	padding-bottom: 1.5em;
	max-width: 720px;
	position: relative;
	z-index: initial;
	will-change: opacity;
}
#ui-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 300px;
	padding: 10px 10px 0px 360px;
	margin: 0em;
	text-align: center;
	/*border-right: 0.15em solid;*/
	box-shadow: 0em 0em 0.2em 0.15em, 0 0 0.15em 0.05em rgba(0,0,0,0.75) inset;
	z-index: 20;
	display: none;
	background: repeating-linear-gradient(-30deg,rgba(31,31,31,0.00),rgba(31,31,31,0.012) 0.15em,rgba(31,31,31,0.015) 0.15em,rgba(31,31,31,0.00) 0.3em), repeating-linear-gradient(30deg,rgba(31,31,31,0.00),rgba(31,31,31,0.012) 0.15em,rgba(31,31,31,0.015) 0.15em,rgba(31,31,31,0.00) 0.3em);
	background-attachment: fixed;
	will-change: transform, opacity;
}
#storyRightBar {
	position: fixed;
	top: 0;
	left: 1430px;
	height:100vh;
	width: 100%;
	box-shadow: 0em 0em 0.2em 0.15em, 0 0 0.15em 0.05em rgba(0,0,0,0.75) inset, 0em 0em 10em 0em black inset;
	z-index:20;
	display: none;
	/*border-left: 0.15em solid;*/
	z-index: 101;
	overflow: hidden;
	will-change: transform, opacity;
}

@media only screen and (max-width: 2024px) {
  #story {
	margin: 0 20px 0 640px;
  }
  
  #storyRightBar {
	left: 1380px;
  }
  #ui-bar {
	padding: 10px 10px 0px 310px;
  }
}

@media only screen and (max-width: 1924px) {
  #story, .movingBox {
	margin: 0 20px 0 590px;
  }
  
  #storyRightBar {
	left: 1330px;
  }
  #ui-bar {
	padding: 10px 10px 0px 260px;
  }
}

@media only screen and (max-width: 1824px) {
  #story, .movingBox {
	margin: 0 20px 0 540px;
  }
  
  #storyRightBar {
	left: 1280px;
  }
  #ui-bar {
	padding: 10px 10px 0px 210px;
  }
}

@media only screen and (max-width: 1724px) {
  #story, .movingBox {
	margin: 0 20px 0 490px;
  }
  
  #storyRightBar {
	left: 1230px;
  }
  #ui-bar {
	padding: 10px 10px 0px 160px;
  }
}

@media only screen and (max-width: 1624px) {
  #story, .movingBox {
	margin: 0 20px 0 440px;
  }
  
  #storyRightBar {
	left: 1180px;
  }
  #ui-bar {
	padding: 10px 10px 0px 110px;
  }
}

@media only screen and (max-width: 1524px) {
  #story, .movingBox {
	margin: 0 20px 0 390px;
  }
  
  #storyRightBar {
	left: 1130px;
  }
  #ui-bar {
	padding: 10px 10px 0px 60px;
  }
}

@media only screen and (max-width: 1424px) {
  #story, .movingBox {
	margin: 0 20px 0 340px;
  }
  
  #storyRightBar {
	left: 1080px;
  }
  #ui-bar {
	padding: 10px 10px 0px 10px;
  }
}

@media only screen and (max-width: 1219px) {
  #story {
	margin: 0 20px 0 260px;
	padding-top: 0.5em;
	padding-bottom: 1.2em;
	/*padding: 0 15px 0 265px;*/
	/*margin-left: 0%;*/
  }
  .movingBox {
	margin: 0 20px 0 260px;
  }
  #ui-bar {
	width: 220px;
  }
  #ui-bar {
	padding-left: 10px;
  }
  #storyRightBar {
  	left: 1000px;
	margin-left: 0%;
  }
}

@media only screen and (max-width: 999px) {
  #storyRightBar {
	/*display: none;*/
	left: 960px;
	margin-left: 0%;
  }
  body {
	font-size: 18.5px;
  }
  #gameInfoDiv {
	  font-size: 275%;
  }
  #ui-bar {
	width: 180px;
  }
   #story, .movingBox {
	margin: 0 20px 0 220px;
  }
  .ui-bar-button {
    display: inherit;
    margin: 1.2em 0;
  }
}

@media only screen and (max-width: 959px) {
  #storyRightBar {
	display: none;
  }
}

@media only screen and (max-width: 839px) {
	#ui-bar-image-container {
		left: 0;
		right: 0;
	}
	#ui-bar {
		position: fixed;
		height: inherit;
		overflow: auto;
		width: 100%;
		padding: 0em;
		margin: 0em 0em 0.5em 0em;
		border-top: none;
		border-right: none;
		border-left: none;
		border-bottom: 0.15em solid black;
		box-shadow: 0.1em 0em 1em 0.1em rgba(0,0,0,0.8), -0.1em 0em 1em 0.1em rgba(0,0,0,0.8), 0em 0em 1em 0.1em rgba(0,0,0,0.5) inset;;
	}
	.messageBox {
		width: 85%;
		left: 7.5%;
		box-sizing: border-box;
	}
	.gameInfo {
		display: none;
	}
	.gameInfoMobile {
		display: inline-block;
	}
	
	#story {
		margin: 0;
		padding:0;
		padding-top: 0.5em;
		padding-bottom: 1em;
		margin-left: auto;
		margin-right: auto;
	}
	.movingBox {
		margin-left: auto;
		margin-right: auto;
	}
	.passage {
		margin-left: 0.0em;
		margin-right: 0.0em;
	}
	#story-caption {
		text-align: center;
	}
	.ui-bar-button {
		display: inline-block;
		min-width: 42%;
		margin: 0.15em 0.5em 0.33em 0.5em;
		will-change: transform, opacity;
		/*transform: translate3d(0px, 0px, -0.1px);*/
	}
	#rankImage {
		width:100%;
		left: 0;
		top: 1.1em;
	}
	#history-backward, #history-forward {
		margin-top: 0.25em;
	}
	.statsContainer {
		max-width: 640px;
	}
}

@media only screen and (max-width: 739px) {
	.passage {
		margin-left: 10px;
		margin-right: 10px;
	}
}

@media only screen and (max-width: 719px) {
  .chapterTitle, .passageTitle, .titleAnimated, .title, .branchQuestion, button, input, textarea, input:focus, input:hover, textarea:focus, textarea:hover, .messageBoxTitle, .gameConceptTitle, .partnerTitle, h2, h3, h4 {
	  font-family: Archivo Narrow, Sans-Serif;
  }
  .passage {
	  line-height: 1.2;
	  margin-left: 0.333em;
	  margin-right: 0.333em;
  }
	.statsContainer {
		max-width: 540px;
	}
}

@media only screen and (max-width: 599px) {
	body {
		font-size: 18.5px;
	}
	.statsContainer {
		max-width: 480px;
	}
}

@media only screen and (max-width: 539px) {
  .passage {
	  margin-left: 0.3em;
	  margin-right: 0.3em;
  }
  body {
	  font-size: 18px;
  }
	.statsContainer {
		max-width: 360px;
	}
}

@media only screen and (max-width: 419px) {
  body {
	  font-size: 17.5px;
  }
	.statsContainer {
		max-width: 340px;
	}
}

@media only screen and (max-width: 389px) {
  .passage {
	  margin-left: 0.25em;
	  margin-right: 0.25em;
  }
  body {
	  font-size: 17px;
  }
	.statsContainer {
		max-width: 320px;
	}
}

@media only screen and (max-width: 359px) {
  body {
	  font-size: 16.5px;
  }
  .statsContainer {
		max-width: 270px;
	}
}

@media only screen and (max-width: 339px) {
  body {
	  font-size: 16px;
  }
}
/* Enables toggle of visibility for complex GUI operations */
.invisibleUI {
	display:none;
}
.passage {	
	/* newgrounds only */
	/*
	overflow: auto;
    overflow-y: scroll;
	max-height: 690px;
	padding-right:15px;
	padding-left: 5px;
	padding-bottom: 20px;
	*/
}
#story {	
	/*newgrounds only*/
	/*
	max-width: 735px;
	*/
}