body {
	background-image: url("main_body.png");
	background-repeat:no-repeat;
	width:680px;
	height:720px;
}


#text-heading {
	font-family: "Farsan", cursive;
	font-size:32px;
}

#text-content {
	margin-top:-24px;
	font-family: "Farsan", cursive;
	font-size: 24px;
}

#text-container {
	line-height:24px;
	margin:auto;
	width:580px;
	height:124px;
	padding-left:12px;
	padding-top:16px;
}

#bgSprite {
	z-index: 1;
	position:absolute;
}

#hannahSprite {
	z-index: 2;
	transition: bounce ease-in-out;
	position:absolute;
	margin-top:40px;
}

#otherSprite {
	z-index: 3;
	transition: bounce ease-in-out;
	position:absolute;
	left:332px;
	margin-top:20px;
}

.bounce {
	transform-origin: bottom center;
	animation-name: bounce;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes bounce {
	0% { transform: scale(1,1) }
	50% { transform: scale(1,0.85) }
  100% { transform: scale(1,1) }
}

#main-image {
	width:620px;
	height:460px;
}


#pageNavs {
	width:360px;
	margin:auto;
}

#image-container {
	width:640px;
	margin:auto;
}


#back-button, #next-button {
	border:none;
	cursor: pointer;
	appearance: none;
	background-color: inherit;
	filter: hue-rotate(0);
}

#back-button:hover, #next-button:hover {
	border:none;
	cursor: pointer;
	appearance: none;
	background-color: inherit;
	filter: hue-rotate(-75deg);
}