html, body {
	background-image: url("../media/page.png"); /*background image*/
	background-size: cover; /*full screen*/
	background-repeat: no-repeat; /*no repeating*/
	background-position: center; /*centering*/
	margin:0;
	padding: 0;
	height:100%;
	font-family: 'Perfect DOS VGA 437','Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; /*custom font*/
	

		
}

#homepage{
	background-image: url("../media/pagepage.png"); /*uses a different background image*/
	background-size: cover; 
	background-repeat: no-repeat;
	background-position: center;
	margin:0;
	height:100%;

}



	
@font-face {
	font-family: 'Perfect DOS VGA 437'; /*name of custom font*/
	src: url('../fonts/Perfect DOS VGA 437.ttf'), format('truetype'); /*source and format of the font*/
	font-weight: normal;
	font-style: normal;
}	


#wrapper {
	background-color:none;
	width:60%;
	min-width:400px;
	height:100%;
	margin:0 auto;
	position:relative;
	

}

#characters{
	display:flex; /*flexbox for layout so I can position them inline*/
	justify-content:space-between; /*space between each character*/
	align-items:center; 
	width:100%; /*whole width of wrapper*/
}

a{
	text-decoration: none; /*styling for links*/
	color:rgb(0, 0, 0);
	font-size: 40px;
	
	
	
}
h1{
	color: rgb(0, 0, 0);
	font-size:46px;
	padding-top: 0.4em;
	padding-bottom: 0;
	text-indent: 2em;
	line-height: normal;
	-webkit-font-smoothing:antialiased;/*works with the font I am using to make it less blurry*/
	
}

h2{
	color: rgb(0, 0, 0);
	font-size:40px;
	text-indent: 2em; /*creates an indent in the text*/
	
}
 ul {
	list-style-type: none;
	font-size: 40px;
	text-align: left;
	padding-top: 0.5em;
	
	
 }
a:active, a:hover {
	color:#59ad60; /*when you hover over it turns green*/

}
img{
	width:26%; /*size of images according to the wrapper*/
	padding-right: 4em;
	padding-top: 2em;
	padding-bottom: 0.3em;
}

.fade-in{
	opacity: 0; /*begin with zero opacity*/
	animation: fadeIn 2s forwards; /*actually applies the animation*/
}

h1.fade-in{
	animation-delay: 2s; /*delay on h1*/
}

h2.fade-in{
	animation-delay: 3s;/*delay on h2*/
}

ul.fade-in{
	animation-delay: 3s;/*delay on ul*/
}

img.fade-in{
	animation-delay: 2s;/*delay on img*/
}



@keyframes fadeIn{
	to{
		opacity: 1; /*how long it takes to fade in fully*/
	}
}

@keyframes shake { /*keyframes for shake animation*/
		0% { transform: translate(1px, 1px); }
		25% { transform: translate(-1px, -2px); }
		50% { transform: translate(-3px, 0px); }
		75% { transform: translate(3px, 2px); }
		100% { transform: translate(1px, -1px); }
	}
	
h1.shake{ /*shake and fade to h1*/
		display: inline-block;
		animation: fadeIn 3s forwards 3s, shake 1.5s forwards 3s;
}

h2.shake{ /*shake and fade to h2*/
		display: inline-block;
		animation: fadeIn 3s forwards 3s, shake 1.5s forwards 3s;
}

.dialogue{ /*way to style a certain form of text*/
	font-style:italic;
	color:rgb(126, 0, 21);
	padding-top: 0.5em;
}

.text{
	position: absolute; /*make sure it is positioned correctly inside of the container*/
	font-size: 2em;
	animation: fadeIn 10s forwards, shake 1.5s infinite; /*duration of both animations*/
	color: rgb(134, 16, 16);
	opacity: 0; /*makes text initially hidden*/

}
 
@keyframes flash{ /*defines the flash animation*/
	0%, 100% {
		opacity: 1; /*full opacity at start and end*/
	}
	50% {
		opacity: 0; /*what it fades to at the midpoint*/
	}
}

.flash-link { /*styling flashing links*/
	animation: flash 2.5s infinite; /*flashes with infinite loop*/
	font-size:2em;
	text-align: center;
}

.flash-link:hover { /*change color when hover*/
	color:#084047;
}

.float-left{ 
	float: left; /*float to the left*/
	margin-right: 20px;
}

.float-right {
    float: right; /*float to the right*/
    margin-left: 20px;
    width: auto; 
    max-width: 512px; 
}

#invbutton { 
	position: absolute; /*make sure it never moves*/
	top: 60px;
	right: -170px; /*avoids contact with other areas*/
	width:80px;
	z-index:1050; /*makes sure it is on the highest layer*/
	cursor: pointer; /*changes cursor to a pointer*/
}

#invbutton:hover{
	transform: scale(1.1); /*when hovering over, scale the img slighly to add interaction*/
}

#inv{ /*styling for inventory*/
	
	position: fixed;
	top: 0;
	left:0;
	width:100%;
	height:100%;
	display: none; /*hide by default */
	background-image: url('../media/inv.png'); /*actualy img of the inventory*/
	background-size: 30%; /*percentage of the margin*/
	background-position: center;
	background-repeat: no-repeat; /*only 1 image no repeats*/
	overflow: hidden;/*hide anything that is overflowing*/
	z-index:50;/*lower on the z index so you can press the sachel to close the inventory*/
	
}

#inv img{ 
	width:40%; /*img width*/
	position: absolute; 
	top:37%; /*% from top*/
	left:38.5%;/*% left*/
	translate:(-50%,-50%); /*centers object*/
	z-index:51;
}

#itemsContainer{
	display:flex; /*allows centering and layout*/
	flex-wrap:wrap; /*allows items to wrap*/
	justify-content: center; /*center items*/
	position:relative; 
	z-index:52;
	padding-top: 200px;
	padding-left:100px;
}

.inventory-item{
	display: inline-block; /*places items in a line*/
	width: 100%;
	text-align: center;
	margin:10px; /*places margin around each item*/
	max-width: 80px; /*max width so they dont get big*/
	
}

.inventory-item p{
	font-size:0.8em; /*smaller font size for item description*/
	
}

.button-container{
	margin:0 auto; /* center container*/
	padding:10px;
	width:100%;
	box-sizing:border-box; /*include the padding to the border*/
}

/*styling for the options in the game*/
.choice{
	display:inline-block; /*allows both choices to be displayed in a row*/
	width:45%; /*each choice takes up this percentage*/
	margin:10px 2%; /*margins*/
	font-family: 'Perfect DOS VGA 437' ; /*custom font*/
	font-size:40px;
	padding: 10px 10px;/*paddings*/
    color: #000000;
    background-color: #533723;
    border: 3px solid #452e1e;
    border-radius: 5px;
    text-transform: uppercase; /*make all text uppercase*/
    cursor: pointer; /*change cursor to pointer*/
    transition: all 0.2s ease; /*smooth transition when going over each choice*/
	white-space: normal;/*allow for text wrapping inside the boxes*/
	word-wrap:break-word; /*break long words*/
	box-sizing:border-box; /*include padding*/

	opacity:0; /*start with 0 on load*/
	animation: showUp 3s 3s forwards; /*apply showUp animation*/
}

@keyframes showUp { /*same thing as fade in but needed another*/
	0%{
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
	
}

.choice:hover{
	background-color: #59ad60; /*change the color to green and the text to white*/
	color: #ffffff;
		transform: scale(1.1); /*scale slightly*/
}

ul li{ /*styles items in the lists*/
	margin-bottom:10px;
}

#pgturn{ /*styles the page turn animation apon load*/
	position: fixed; /*position never changes*/
	top:0; /*aligns the image to origin*/
	left:0;
	width:100%; /*full width and height*/
	height:100%; 
	z-index:1040; /*highest z index*/
	object-fit: cover; /*make sure it covers everything on the page*/

}

#characters img.second-image {
    width: 512px; /*changes the width of the second image to 512*/
}