@charset "UTF-8";
/* CSS Document */

/*------------------------------------*\
CONTENTS
\*------------------------------------*/
/*
RESET
STRUCTURE
COLORS & TYPOGRAPHY
UTILITY
SCENE SPECIFIC STYLES
MQs
*/





/*------------------------------------*\
RESET
\*------------------------------------*/
html, body, 
div, span,
h1, h2, h3, h4, h5, p,
a, img,
ul, li,
button,
nav, header, footer,
video,
form, label, input {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* No styling for mobile devices */
button, textarea, input  {
	-webkit-appearance: none;
	border-radius: 0;
	background: none;
}

ul {
	list-style: none;
}

/* When you tap an object, there won't be any unseemly highlighting */
* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
}





/*------------------------------------*\
STRUCTURE
\*------------------------------------*/
body .wrapper {
	 /* will-change: opacity; */ 
}

.wrapper {
	background-image: url(img/tile_bg.jpg);
	transition: opacity .5s linear;
	min-height: 100vh;
	opacity: 1;
}

.container {
	padding: 1em 0;
	max-width: 40em;
    margin: 0 auto;
}

.section-a {
	min-height: 50vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	/* transition: opacity .5s ease-in-out; */
}

.section-b {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 1em;
}

.nav {
	width: 90%;
	margin: 0 auto
}

.nav li {
	display: block;
    border: dotted 1px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.25em;
    text-align: center;
    padding: 0.75em;
	cursor: pointer;
	line-height: 2rem;
    font-size: 1.5rem;
}

.nav li:active {
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
}





/*------------------------------------*\
COLORS & TYPOGRAPHY
\*------------------------------------*/
body {
	font-family: mrs-eaves, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.25em;
	line-height: 1.25em;
	color: rgba(0, 0, 0, 0.8);
	background: #000;
}

p {
	line-height: 2rem;
    font-size: 1.5rem;
	margin-bottom: 1rem;
	/* text-rendering: optimizeLegibility; */
}

/* No text selection */
p, li {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

/* Style the small caps for the first line */
.section-b p:nth-child(1)::first-line {
	font-family: mrs-eaves-roman-small-caps;
	font-style: normal;
	font-weight: 400;
 	text-transform: lowercase; /* This only works in FF, BTW */
}

/* Style the drop cap */
.section-b p:nth-child(1)::first-letter { 
	text-transform: uppercase; /* This only works in FF, BTW */
	float: left;
    font-size: 5rem;
    line-height: 2rem;
    margin: 1rem 0.5rem 0 0;
    font-family: mrs-eaves-xl-serif;
    font-style: normal;
    font-weight: 700;
}

/* For the time being, I'm going to do "You..." via Javascript, even though I'd rather not :(

	Include You... before the nav 
	#content .section-b p:nth-last-child(1)::after {
		font-family: mrs-eaves !important;
		padding-top: 1rem;
		display: block;
		content: "\A You...";
	}

	.section-b.no-you p:last-of-type:after {
		margin-top: 0;
		display: inherit;
		content: none
	}

*/

/* So this is the temporary 'add you' class */
#section-b p.you {
	padding-top: 1rem;
	display: block;
}

/* For times when you don't want a drop cap –– or small caps on the first line */
#section-b.no-drop-cap p:first-of-type:first-letter {
	font-family: mrs-eaves-roman-small-caps;
	font-weight: 400;
	float: none;
    font-size: 1em;
    line-height: 1em;
    margin: 0;
}

#section-b.no-first-line p:first-of-type::first-line {
	font-family: mrs-eaves, serif;
}

/* Utility typefaces */
.italics {
	font-style: italic;
}

.small-caps {
	font-family: mrs-eaves-roman-small-caps;
}

.bold {
	font-family: mrs-eaves-xl-serif;
}





/*------------------------------------*\
UTILITY
\*------------------------------------*/

/* This is where background images for each scene are loaded */ 
#wrapper::after {
	display: none;
}

/* 0 opacity class */ 
.fade-out {
	opacity: 0;
}

/* When images need to be preloaded into a hidden container */ 
#hidden, .hidden {
	height: 0px;
	width: 0px;
	overflow: hidden;
	display: inline;
}

/* Handling the background flipping on scenes 0045 and 0055 */
.flip-background {
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.has-audio:before {
	display: block;
	content: "Note: This scene has sound.";
	font-style: italic;
	margin-bottom: 1rem;
}





/*------------------------------------*\
UNIQUE SCENES
\*------------------------------------*/

/* These are for the home screen */
.alt-bg {
	background: #000;
	color: #fff;
}

.alt-bg .nav li {
	border: dotted 1px rgba(255, 255, 255, 0.5);
}

.map {
	background-image: url(img/map.jpg);
	min-height: 100vh;
	margin-bottom: 1em;
}

/* These are  related to the item selection scene */
#item-selection-screen {
	margin-top: 2.5em;
}

.item-count-container {
	display: block;
	text-align: center;
	padding: 0.5em 0;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	font-size: 1.5em;
	box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
	background-image: url(img/tile_bg.jpg);
	transition: opacity .5s ease-in-out;
	opacity: 1;
	z-index: 2;
}

.item-count-container-text.plural:after {
	content: "s";
}

#item-counter {
	color: red;
}

.item-selection-list {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.item-selection-item {
	text-align: center;
    margin-bottom: 1em;
    border: dotted 1px rgba(0, 0, 0, 0.25);
    width: 46%;
    vertical-align: top;
    padding: 0.25em 0;
    border-radius: 0.25em;
	transition: all .5s ease-in-out;
	cursor: pointer;
}

.item-selection-caption {
	display: block;
	padding-bottom: 0.25em;
}

.item-selection-img {
	max-width: 100%;
	max-height: 20vh;
}

.itemSelected {
	opacity: 0.25;
	border: dotted 1px rgba(0, 0, 0, 0);
}

.content-0001 .section-a {
	margin-bottom: 1.25em;
}

#item-selection-screen .nav-list {
	transition: opacity .5s ease-in-out;
	opacity: 0;
}

#item-selection-screen.maxItems .nav-list {
	opacity: 1;
}

#item-selection-screen.maxItems .item-count-container {
	opacity: 0;
}

/* If you roll a 1 on a 1d20, it could happen on scene 0190 */
.d20_1 {
	background-image: url(img/0190a.jpg);
}

/* Handling the video on scene 0122 */
.video-wrapper {
	width: 98%;
	margin: 0 auto;
	overflow: hidden;
}

.video-0122 {
	width: 102%;
	margin-left: -1%;
}

/* Avoid a horizontal scroll bar with the rotating spiral */
.content-0014 {
	overflow: hidden;
}

/* For rotating the bg on scene 0014 */
.rotating-background {
	animation: rotation 4s linear infinite;
}

@keyframes rotation {
	0% { 
		transform:rotate(0deg) scale(0.75); 
	}
	50% { 
		transform:rotate(180deg) scale(0.85); 
	}
  	100% { 
		transform:rotate(360deg) scale(0.75); 
	}
}

/* Styling the list on the dead end */
.non-std-p {
	margin-bottom: 0;
	font-style: italic;
}

#scene-list ul, #item-list ul {
	margin-bottom: 1rem;
}

#scene-list li, #item-list li {
	display: inline;
	line-height: 2rem;
    font-size: 1.5rem;
}

#scene-list li {
	display: inline-block;
    margin-right: 0.25em;
    line-height: 0.85em;
    margin-bottom: 0.5em;
}

#scene-list li.nav-list-item {
	border-bottom: dotted 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

#scene-list li.nav-list-item:hover {
	color: red;
}

#item-list li {
	text-transform: capitalize;
}

#scene-list li:after {
	content: ',';
	border: none;
}

#item-list li:after {
	content: ', ';
}

#scene-list li:last-of-type:after, #item-list li:last-of-type:after {
	content: '.';
}

#scene-list li:last-of-type:before, #item-list li:last-of-type:before {
	content: 'and ';
	text-transform: lowercase;
	border: none;
}

.red {
	color: red;
}





/*------------------------------------*\
MEDIA QUERIES
\*------------------------------------*/

/* As the screen widens, increase the size of the text */
@media (min-width: 61.25em) {
	p, .nav li, #item-list li, #scene-list li { 
		font-size: 2rem;
    	line-height: 2.75rem;
	}
	
	.section-b p:first-of-type:first-letter { 
    	font-size: 6.5rem;
		line-height: 3.5rem;
	}
}