@import url("fontdata.css");





html{
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;    	
    background: url('../assets/environments/sitefullbg.gif');
}


body{
	color: #FFF;
	font-family: Stickynote;
}

#bigWrapper{
    max-width: 1200px;
    width: 100%;
    margin: auto;
    background-color: #333;
    background: url('../assets/environments/sitebggif.gif');
    background-position: center;
}
/*Location Bar Stuff*/
#boxLocation{
	width: 98%;
	position: relative;
	font-family: GothicSpell;
	color: white;
	text-shadow: 2px 2px 4px #000;
}
#locTxt {
	position:absolute;
	top: 50%;
	width:100%;
	text-align: center;
	margin: auto;
	font-size:55px;
	font-size: min(4.8vw, 60px);
	
}
#locationBar {
	width: 100%;
}

/*Game Bar*/
#boxGame{
	width: 98%;
	margin: auto;
	position: relative;
}
#gameBG {
	width: 100%;
}
.Btn { /*specifics can be determined inline*/
	position: absolute;
	padding: 12%;
	cursor: var(--cpointer), pointer;
}





/*popup*/
.popup{
	position: absolute;
	width:100%;
	top:0%;left:0%;
}
.popup > * {
	position: absolute;
	top:0%;left:0%;
}
.popBG {
	width:100%;
}
.popClose {
	position: absolute;
	padding: 0%;
	width: 9%;
	content:url('../assets/utility/close.gif');
}
.popClose:hover{
	content:url('../assets/utility/closeHighlight.gif');
}
.popContents{
	width:89%;
	margin-top: 8.9%;
	left: 5%;
	position: relative;
	padding-bottom: 50%;
}
.popContents > * {
	position: absolute;
	top:0%;left:0%;
}

.popNest {
	background: rgba(0,0,0,0.2);
	padding: 1%;
	border-radius: 10px;
	overflow: auto;
	max-height: 115%;
}
.popNest > *{
	overflow: auto;
		margin-top: 3%;
	margin-bottom: 3%;
}


/*Fader stuff*/
#fader {
	position:absolute;
	top:0%;left:0%;
	width: 100%;
	height: 100%;
	transition-duration: 1s;
	text-align: center;
}
#faderTXT {
	position: absolute;
	top:45%;
	left: 35%;
	text-align: center;
	font-family: GothicFlame;
	text-shadow: 2px 2px black;
}
#faderIMG {
	width:100%;
	height:100%;
}



/* Focus contents*/
#focusItemContainer{
	width:80%;
	left: 10%;
	height: 60vw;
	max-height: 730px;
} 
#focusItem {
	width:100%;
	height: 100%;
	object-fit: contain;
}
#focusTitle {
	padding-top:58%;
	width:100%;
	font-size: min(3.8vw, 47px);
	text-align: center;
	font-family: Typo;
}
#focusDescription {
	padding-top:62%;
	color: #CCC;
	width:100%;
	font-size: min(3.5vw, 35px);
	text-align: center;
	font-family: Weirdpixel;
}


/*Book Contents*/
.bookLeft, .bookRight {
	padding-bottom: 63%;
}
.bookRight{
	left:76%;
}

#bookHolder{ /*The holder of all the images*/
	position:relative;
	width:90%;
	padding-top:55%;
	margin-top: 5%;
	margin-left: 3%;
	
}
#pageNo {
	position:absolute;
	margin-top: 65%;
	left:48%;
	font-family: Scrybbledot;

}

.bookItemHolder { /*The divs that hold the images*/
	position:absolute;
	overflow: hidden;
	left: 0%;
	top: 0%;
	width: 15.5%;
	height: 24.5%;
	background-color: rgba(0,0,0,0.2);
	border: 5px inset gray;

}

.bookItem { /*The image files themselves*/
	position: absolute;
	width: 100%;
	left: 0%;
	top: 50%;
	-ms-transform: translateY(-50%);
    transform: translateY(-50%);

	
}
	/*
	width:15.5%;
	left: 0%;
	top: 0%;
	max-height:50%;*/
	

	/*top and left set in code*/
/*inventory*/
.invItem {
	width:14%;
	transition-duration: 0.2s;
	transform: scale(1,1);
	padding:2.7%;
	background: url('../assets/utility/inventorybox.gif') no-repeat center;
	background-size: 100%;
}

.hoverSize:hover {
	transition-duration: 0.2s;
	transform:scale(1.1,1.1);
	cursor: var(--cpointer), pointer;
}
.hoverSize:active {
	transition-duration: 0.2s;
	transform:scale(0.9,0.9);
}

.debug {
	border: 1px solid red;
}