@import url('https://fonts.googleapis.com/css?family=Righteous');

body {
	background-color: black;
	margin: 0px;
	font-family: 'Righteous', cursive;
}

/*START PAGE*/

#title {
	position: absolute;
	left:200px;
	font-size:25px;
	width:450px;
	height:30px;
	border-radius: 30px;
	background-color:black;
	color:yellow;
	padding:10px;
	text-align: center;
	border:solid yellow;
}

.Button {
	margin:auto;
	left:10px;
	top:5px;
	position: absolute;
}

#start {
	position: absolute;
	left:250px;
	bottom: 20px;
	border:solid yellow;
	height:50px;
	width:100px;
	border-radius: 30px;
	background-color: black;
	color: yellow;
	cursor: pointer;
}

#start:hover {
	position: absolute;
	left:250px;
	bottom: 20px;
	border:solid;
	height:50px;
	width:100px;
	border-radius: 30px;
	background-color: orange;
	cursor: pointer;
}

#story {
	position: absolute;
	left:500px;
	bottom: 20px;
	border:solid yellow;
	height:50px;
	width:100px;
	border-radius: 30px;
	background-color: black;
	color: yellow;
	cursor: pointer;
}


#story:hover {
	position: absolute;
	left:500px;
	bottom: 20px;
	border:solid;
	height:50px;
	width:100px;
	border-radius: 30px;
	background-color: orange;
	cursor: pointer;
}

#play {
	position: absolute;
	bottom:5px;
    left:10px;
    width:50px;
    height:40px;
    cursor: pointer;
}

#mute {
	position: absolute;
	bottom:5px;
    left:10px;
    width:56px;
    height:40px;
    cursor: pointer;
    display: none;
}


/*STAGE & TEXT BOXES*/

.stage {
	width:850px;
	height: 500px;
	margin: auto;
	position: relative;
	margin-top: 40px;
	overflow: hidden;
}

.textBox {
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 20px;
	color: yellow;
	font-size: 30px;
	padding: 10px;
	position: absolute;
	height: 50px;
	width:375px;
	bottom: 0px;
	left:50px;
	text-align: center;
	display: none;
	border:solid yellow;
	z-index: 4;
}

.tipBox {
    background-color: rgba(0, 0, 0, 0.5);
	border-radius: 20px;
	color: yellow;
	top: 0px;
	height: 85px;
	font-size: 15px;
	padding: 10px;
	margin:auto;
	position: absolute;
	text-align: center;
	border:solid yellow;
	z-index: 5;
}

#page1 {
	background-image: url(images/bobafettbackground.jpg);
	background-position: center;
	background-size: 100% 100%;
}

#page1a {
	background-image: url(images/bobafettbackground.jpg);
	background-position: center;
	background-size: 100% 100%;
	display: none;
}


#text1a {
	height: 150px;
	width:725px;
	top:150px;
	left:50px;
	display: none;
}

#page1b {
	background-position: center;
	background-size: 100% 100%;
	display: none;
}

#page2 {
	background-image: url(images/page2background.jpg);
	background-position: center;
	background-size: 45% 100%;
	background-repeat: no-repeat;
	display: none;
}

#text2 {
	left:225px;
}

#text3 {
	height: 150px;
	width:725px;
	top:150px;
	left:50px;
	display: none;
}

#page4 {
	background-image: url(images/page4background.png);
	background-position: center;
	background-size: 100% 100%;
	display: none;
}

#text4 {
	height: 65px;
	width:725px;
	font-size: 20px;
	display: none;
}

#tip4 {
	width:100px;
	display: none;
	padding-bottom: 20px;
}

#page5 {
	background-image: url(images/monsterflesh.jpg);
	background-position: center;
	background-size: 100% 100%;
	display: none;
	animation: shake 3.5s cubic-bezier(.36,.07,.19,.97) both;
}

#text5 {
	height: 50px;
	width:725px;
	display: none;
}

#page6 {
	background-image: url(images/belly.jpg);
	background-position: center;
	background-size: 100% 100%;
	display: none;
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both 0.9s;
}

#text6 {
	height:50px;
	width:150px;
	left:325px;
	bottom:15px;
	display: none;
}

#page7 {
	background-image: url(images/belly.jpg);
	background-position: center;
	background-size: 100% 100%;
}

#tip7 {
	width:100px;
	display: none;
}

#text7 {
	border-radius: 20px;
	height:50px;
	width:270px;
	left:275px;
	display: none;
}

#textCase7 {
	position: absolute;
	width:195px;
	height: 55px;
	left:47px;
	font-size: 13px;
	cursor: pointer;
}

#page7a-HeartRoom {
	background-image: url(images/heartbackgroundwithhole.png);
	background-position: center;
	background-size: 100% 100%;
	display: none;
}

#tip7-HeartRoom {
	width:100px;
	display: none;
}

#heartText {
	height:50px;
	width:150px;
	left:660px;
	bottom:35px;
	font-size: 20px;
	z-index: 5;
	display: none;
}

#helpText {
	height:50px;
	width:150px;
	left:324px;
	bottom:-400px;
	font-size: 13px;
	display: none;
}

#page7b-LungRoom {
    background-image: url(images/lungbackground.jpg);
	background-position: center;
	background-size: 100% 100%;
	display: none;
}

#tip7-LungRoom {
	width:100px;
}


#page7c-KidneyRoom {
	background-image: url(images/kidneybackground.png);
	background-position: center;
	background-size: 100% 100%;
	display: none;
}

#tip7-KidneyRoom {
	width:100px;
}

#page9 {
	background-image: url(images/brain.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 85%;
	display: none;
}

#text9 {
	border-radius: 20px;
	height:50px;
	width:270px;
	bottom:38px;
	left:275px;
	display: none;
}

#page10 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#text10 {
	height: 150px;
	width:725px;
	top:150px;
	left:50px;
	font-size: 90px;
	display: none;
}

#page11 {
	background-image: url(images/brain.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 85%;
	display: none;
}

#page12 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
}

#page13 {
	background-image: url(images/page15background.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
}

#text13 {
	left:225px;
	width:400px;
	font-size: 18px;
	background-color: rgba(0, 0, 0, 0);
	border:none;
}

#page14 {
	background-image: url(images/page14backgroundwithhole.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 85%;
	display: none;
}

#tip14 {
	width:100px;
	top:37.5px;
	display: none;
}

#page15 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;            
}

#video {
    position: absolute;
    right: 0;
    bottom: 0;
    width:850px;
	height: 500px;
}

/*BOBA FETT*/
.boba {
	position: absolute;
	z-index: 3;
}

#bobaFly {
	position: absolute;
}

#bobaIcon {
	width:45px;
	height: 50px;
	border-radius: 50px;
	top:10px;
	left:5px;
	display: none;
}

#boba5 {
	width:100px;
	height: 150px;
	left:375px;
	top:-120px;
	-webkit-animation: rotation 4s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(90deg);
		}
		to {
				-webkit-transform: rotate(700deg);
		}
}

#boba6 {
	width:100px;
	height: 150px;
	left:375px;
	top:-120px;
	transform: rotate(90deg);
	-webkit-animation: rotation 1.2s ease;
}

@-webkit-keyframes rotation {
		to {
				-webkit-transform: rotate(90deg);
		}
		from {
				-webkit-transform: rotate(700deg);
		}
}


#boba7 {
	width:100px;
	height:150px;
	left:375px;
	top:320px;
}

#boba7a {
	width:80px;
	height: 125px;
	left:575px;
	top:-120px;
	transform: rotate(90deg);
	-webkit-animation: rotation 1.2s ease;
}

#boba7b {
	width:100px;
	height:150px;
	left:75px;
	top:320px;
}

#boba7c {
	width:100px;
	height:150px;
	right:275px;
	top:320px;
}

#boba7-final {
	width:125px;
	height:180px;
	left:360px;
	top:280px;
}

#boba8 {
	width:80px;
	height: 125px;
	left:375px;
	top:510px;
}

#boba9 {
	width:100px;
	height: 153px;
	left:865px;
	top:290px;
}

#boba11 {
	width:100px;
	height:153px;
	left:620px;
	top:200px;
}

#boba14 {
	width:100px;
	height:153px;
	left:620px;
	top:200px;
}

#bobashoot {
	width:133px;
	height:153px;
	left:574.9px;
	top:200px;
	display: none; 
}

#bobathrow {
	width:104px;
	height:153px;
	left:616.9px;
	top:200px;
	display: none;
}

/*GASGANO*/

.gasgano {
    position: absolute;
	z-index: 2;
}


#gasganoIcon {
	width:45px;
	height: 50px;
	border-radius: 50px;
	right:5px;
	top:10px;
	display: none;
}

#gasgano {
	width:105px;
	height: 220px;
	top:155px;
	left:320px;
	z-index: 3;
}

#gasganopod {
	width:295px;
	height: 180px;
	right:-180px;
	top:-170px;
	transform: rotate(-35deg);
}


/*WEAPONS*/

.clickable-items {
	position: absolute;
	cursor: pointer;
}

#jetPack {
	width:45px;
	height:60px;
	right:425px;
	bottom:13px;
	transform: rotate(90deg);
	display: none;
	z-index: 2;
}

#blaster{
	right:372px;
	bottom:0px;
	width:50px;
	height:60px;
	transform: rotate(-50deg);
	display: none;
}

#grenade {
	right:20px;
	bottom:115px;
	width:20px;
	height:30px;
	transform: rotate(-90deg);
}

.smallMessage {
	position: absolute;
	border-radius: 20px;
	color: yellow;
	text-align: center;
	font-size: 7px;
	padding: 5px;
	z-index: 5;
	width:45px;
	height: 15px;
	display: none;
}

#jetpackMessage {
	bottom:95px;
	right:400px;	
}

#blasterMessage {
	bottom:75px;
	right:360px;
}

#grenadeMessage {
	bottom:85px;
	right:0px;
}

#grenadeMessage-page14 {
	top:195px;
	right:420px;
	font-size:15px;
	width:100px;
	height:50px;
}

/*ITEMS AND INTERACTABLES FROM ALL PAGES*/
.draggable-items {
    position: absolute;
    cursor: pointer;
}

.tentacles {
	position: absolute;
	z-index: 1;
}

#tentacle1 {
	left:-55px;
	bottom:53px;
	width:456px;
}

#tentacle2 {
	top:315px;
	right:0px;
	width:214px;
}

#tentacle3 {
	top:-80px;
	left:334px;
	width:110px;
}

#tentacle-page9 {
	position: absolute;
	top:94px;
	right:-304px;
	width:262px;
	z-index: 3;
	transform: rotate(90deg);
}
#tentacle-page11 {
	position: absolute;
	top:0px;
	right:-50px;
	width:262px;
	z-index: 3;
	transform: rotate(90deg);
}

#hand {
	position: absolute;
	z-index: 2;
	width:27px;
	height: 30px;
	bottom:81px;
	right:144px;
	transform: rotate(10deg);
}

#knife {
	position: absolute;
	z-index: 1;
	width:130px;
	height: 56px;
	bottom:49px;
	right:148px;
}

#esophagus {
	position: absolute;
	width:300px;
	height: 500px;
	left:275px;
	top:0px;
	background-color: #230000;
	z-index: 1;
}

#fire {
	position: absolute;
	z-index: 1;
	width:200px;
	height: 200px;
	bottom:-30px;
	left:-20px;
}

#fireSmoke {
	position: absolute;
	width:200px;
	height: 200px;
	bottom:40px;
	left:-20px;
}

#platformFire {
	position: absolute;
	z-index: 3;
	width:310px;
	height: 200px;
	top:50px;
	left:-60px;
	transform: rotate(162deg);
	display: none;
}

/*EXPLOSIONS*/

#explosionPage6 {
	position: absolute;
	width:300px;
	height: 200px;
	left:265px;
	top:335px;
	display: none;
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	opacity: 0.5;
}

#heartExplosion {
	position: absolute;
	width:300px;
	height: 200px;
	right:-40px;
	top:325px;
	display: none;
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	opacity: 0.5;
	z-index: 5;
}

.jetpackexplosion {
	position: relative;
	animation: shake 0.01s cubic-bezier(.36,.07,.19,.97) both infinite;
	display: none;
}

#jetpackexplosion1 {
	width:50px;
	height: 100px;
	left:432px;
	top:382px;
}

#jetpackexplosion2 {
	width:50px;
	height: 100px;
	left:312px;
	top:382px;
}

#jetpackexplosion1-HeartRoom {
	width:40px;
	height: 90px;
	left:740px;
	top:400px;
}

#jetpackexplosion2-HeartRoom {
	width:40px;
	height: 90px;
	left:655px;
	top:400px;
}


#jetpackexplosion1-Page8 {
	width:25px;
	height: 55px;
	left:417px;
	top:582px;
	z-index: 2;
	display: unset;
}

#jetpackexplosion2-Page8 {
	width:25px;
	height: 55px;
	left:356px;
	top:582px;
	z-index: 2;
	display: unset;
}

#jetpackexplosion1-Page9 {
	width:40px;
	height: 90px;
	left:919px;
	top:357px;
	display: unset;
}

#jetpackexplosion2-Page9 {
	width:40px;
	height: 90px;
	left:828px;
	top:357px;
	display: unset;
}

#jetpackexplosion1-Page14 {
	width:50px;
	height: 100px;
	left:678px;
	top:353px;
	z-index: 2;
}

#jetpackexplosion2-Page14 {
	width:50px;
	height: 100px;
	left:563px;
	top:353px;
	z-index: 2;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}


/*LUNG ROOM*/
.lungPlatforms {
    position: absolute;
}

#lungPlatform1 {
	width:200px;
	height:100px;
	top:171px;
	left:185px;
}

#lungPlatform2 {
	width:200px;
	height:100px;
	top:-25px;
	right:275px;
}

#lungPlatform3 {
	width:200px;
	height:100px;
	bottom:135px;
	right:95px;
}

#lungRock1 {
	position: absolute;
	width:50px;
	height:50px;
	left:25px;
	bottom:0px;
	z-index: 3;
}

#lungRock2 {
	width:50px;
	height:50px;
	left:25px;
	bottom:0px;
	z-index: 2;
}
#lungRock3 {
	width:50px;
	height:50px;
	left:25px;
	bottom:0px;
	z-index: 1;
}

/*KIDNEY ROOM*/

.clickable-items-Kidney {
	position: absolute;
	cursor: pointer;
}

.kidneyBox {
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 20px;
	position: absolute;
	height: 130px;
	width:175px;
	bottom: 35px;
	right:100px;
	border:solid yellow;
	z-index: 3;
}

.kidneyItems {
	position: absolute;
	display: none;
}

#blasterScope {
	width:125px;
	height:64px;
	bottom:75.5px;
	left:40px;
}

#blasterGrip {
	width:100px;
	height:100px;
	top:18px;
	left:70px;
}

#blasterMuzzle {
	width:95px;
	height:45px;
	bottom:62px;
	right:81px;
}

#blasterAmmo {
	width:45px;
	height:68px;
	bottom:30px;
	right:74px;
}

#blasterScope-clickable {
	width:55px;
	height:34px;
	bottom:90px;
	left:358px;
	transform: rotate(20deg);
}

#blasterMuzzle-clickable {
	width:50px;
	height:28px;
	bottom:105px;
	left:-17px;
	transform: rotate(-35deg);
}

#blasterAmmo-clickable {
	width:31px;
	height:38px;
	bottom:205px;
	left:161px;
}

#blasterGrip-clickable {
	width:33px;
	height:32px;
	bottom:0px;
	right:376px;
	transform: rotate(-52deg);
}

/*HEART ROOM*/

#heartPlatform {
    position: absolute;
	width:190px;
	height:120px;
	top: 74px;
	left:-4px;
	z-index: 4;
}

.skulls-draggable {
	position: absolute;
	cursor: pointer;
	bottom: 0px;
	z-index: 3;
}

#skull1 {
	width:75px;
	height:80px;
	right:385px;
}

#skull2 {
	width:90px;
	height:90px;
	right:440px;
}

#skull3 {
	width:60px;
	height:70px;
	right:340px;
	bottom: -10px;
}

#skull4 {
	width:100px;
	height:90px;
	right:250px;
	bottom:-10px;
}

#skull5 {
	width:100px;
	height:90px;
	right:490px;
	bottom:-5px;
}

#skull6 {
	width:100px;
	height:90px;
	right:320px;
	bottom:30px;
}

#skull7 {
	width:100px;
	height:90px;
	right:400px;
	bottom:30px;
}

#skull8 {
	width:100px;
	height:90px;
	right:550px;
	transform: scaleX(-1);
}

#skull9 {
	width:100px;
	height:90px;
	right:465px;
	bottom:30px;
}

.bigSkulls{
   position: absolute;
   z-index: 2;
}

#bigSkull1 {
	width:400px;
	height:195px;
	right:195px;
	bottom: 9px;
}

#bigSkull2 {
	width:400px;
	height:195px;
	right:137px;
	bottom: -80px;
	transform: rotate(90deg);
}

#bigSkull3 {
	width:400px;
	height:195px;
	right:345px;
	bottom: -43px;
	transform: rotate(262deg);
}

#hammer {
	position: absolute;
	width:25px;
	height:35px;
	left:80px;
	top:128px;
	z-index: 3;
	cursor: pointer;
}

#door-droppable {
	position: absolute;
	width:205px;
	height:105px;
	left:308px;
	bottom:-9px;
	border-radius: 25px;
	z-index: 2;
}

#doorSmashed {
	position: absolute;
	width:150px;
	height:70px;
	left:340px;
	bottom:11px;
	z-index: 2;
	display: none;
}

/*PAGE 14 STUFF*/
.inv-items-page14 {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	border:solid yellow;
	border-radius: 20px;
	bottom:37.5px;
	right:0px;
	height: 80px;
	width: 100px;
	z-index: 3;
	display: none;
}

#inv-Blaster-page14 {
	position: absolute;
	height: 80px;
	width: 80px;
	left: 7px;
	cursor: pointer;
	display: none;
}

#inv-Blaster2-page14 {
	position: absolute;
	height: 80px;
	width: 80px;
	left: 7px;
	cursor: pointer;
	z-index: 2;
	display: none;
}

#inv-Grenade-page14 {
	position: relative;
	left:23px;
	height: 80px;
	width: 50px;
	z-index: 3;
	transform: rotate(50deg);
	cursor: pointer;
	display: none;
}

#laser {
	position: absolute;
	height: 50px;
	width: 50px;
	right: 280px;
	bottom:178px;
	z-index: 1;
	display: none;
	transform: rotate(55deg);
}

#minigrenade {
	position: absolute;
	height: 20px;
	width: 15px;
	right: 217px;
	bottom:138px;
	z-index: 3;
	display: none;
	-webkit-animation: rotation 3s infinite linear;
}

#vulnerablehole {
	position: absolute;
	width:431px;
	height:337px;
	right: 248px;
	top:40px;
}

#explosionpage14 {
	position: absolute;
	width:500px;
	height:337px;
	right: 238px;
	top:40px;
	z-index: 3;
	display: none;
	animation: shake 0.1s cubic-bezier(.16,.07,.19,.97) both infinite;
}