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

/* fonts designed by me, Audrey Custodio */
@font-face {
  	font-family:'Pixel party';
  	src: url("fonts/pixelparty!!!.ttf") format("truetype"); 
}

#stage {
	height: 650px;
	width: 900px;
	position: relative;
	margin: auto;
	margin-top: 50px;
	border-style: solid;
	border-color: #812564;
	border-width: 3px;
	overflow: hidden;
	background-color: #812564;
}


/*https://stackoverflow.com/questions/6816080/how-to-disable-highlight-on-an-image*/

html {
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
	-ms-user-select: none;
    user-select: none;
	font-family: "Pixel party", sans-serif;
	font-size: 10px;
	background-color: black;
}


div {
	border-radius: 25px;
}

button {
	font-family: "Pixel party";
	padding: 10px;
	font-size: 8px;
	border-radius: 25px;
    background: none;
    border: none;
    outline: none;
	color: #FFFFFF;
	width: 50px;
}

button:hover {
	color: yellow;
}

#ui {
	height: 650px;
	width: 900px;
	position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*characters*/

#clover {
	position: absolute;
	height: 197px;
	width: 166px;
	left: 400px;
	bottom: 80px;
	z-index: 4;
    transition: transform 0.5s ease;
    transform-origin: center bottom;
	transform: scaleX(1);
}

#cloverportrait {
	height: 100px;
	width: 100px;
	background-image: url("images/portraits/portraits16.png");
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 6;
}

#jay {
	position: absolute;
	height: 216px;
	width: 159.75px;
	left: 1800px;
	bottom: 90px;
	z-index: 3;
}

/*dialogue box*/

#dialoguebox {
	position: absolute;
	background-color: #000000;
	bottom: 12px;
	left: 125px;
	height: 150px;
	width: 650px;
	z-index: 8;
	cursor: pointer;
}

#portrait {
	height: 100px;
	width: 100px;
	background-color: #316737;
	position: absolute;
	left: 20px;
	top: 25px;
}

#dialoguebox p {
	color: #FFFFFF;
	position: absolute;
	left: 140px;
	top: 10px;
	width: 485px;
	height: 90px;
	overflow-wrap: break-word;
	padding: 10px;
	font-family: "Pixel party", sans-serif;
}

/*pop-ups*/
#itemsfull {
    position: absolute;
	width: 200px;
	height: 100px;
    background-color: #000000;
    color: #FFFFFF;
    padding: 20px;
	z-index: 9999;
	text-align: center;
}

#itemsfull p {
	margin-top: 25px;
}

/*menu ui stuff*/

.menuitem {
	position: absolute;
	background-color: #000000;
	height: 80px;
	width: 150px;
	bottom: 30px;
	cursor: pointer;
	z-index: 4;
}

.menuitem p {
	color: white;
	margin-top: 25px;
	text-align: center;
}

.menuitem p:hover {
	color: yellow;
}

/*fight ui stuff*/

#timer {
	position: absolute;
	background-color: #FFB23F;
	bottom: 30px;
	left: 300px;
	width: 300px;
	height: 50px;
	z-index: 5;
}

.pow {
	position: absolute;
	z-index: 9999;
}

#cloverhealth {
	position: absolute;
	background-color: #ff4cd2;
	max-width: 200px;
	width: 200px;
    height: 20px;
	z-index: 4;
}

#cloverhealthback {
	position: absolute;
	background-color: #812564;
	max-width: 200px;
	top: 140px;
	left: 30px;
	width: 200px;
	height: 20px;
	border: medium;
	border-color: black;
	border-width: thick;
	border-style: solid;
	z-index: 4;
}

#enemyattackscreen {
	width: 300px;
	height: 200px;
	background-image: url("images/enemyattackscreen.png");
	text-align: center;
	z-index: 5;
	position: absolute;
	top: 150px;
	left: 300px;
}

#enemyattackscreen p {
	color: #812564;
	margin-top: 70px;
    width: 20px;
    margin-left: 100px;
}

#combatbox {
	position: absolute;
	background-color: #000000;
	bottom: 12px;
	height: 130px;
	width: 700px;
	z-index: 4;
	cursor: pointer;
	padding: 8px;
	font-family: "Pixel party", sans-serif;
}

#combatbox p {
	color: #FFFFFF;
	position: absolute;
	height: 90px;
	overflow-wrap: break-word;
	font-size: 8px;
	padding: 20px;
	font-family: "Pixel party", sans-serif;
}

/*action menu stuff*/

.action:hover {
	color: yellow;
	cursor: pointer;
}

#actionmenu {
	position: absolute;
	background-color: #000000;
	bottom: 12px;
	left: 155px;
	height: 140px;
	width: 450px;
	z-index: 4;
	text-align: left;
}

#actionback {
	position: absolute;
	left: 480px;
	bottom: 0px;
	background-color: #000000;
	color: white;
	padding: 5px;
	cursor: pointer;
	z-index: 4;
}

#actionback p {
	padding: 10px 20px;
}

#actionmenu ul {
	color: #FFFFFF;
	width: 340px;
	height: 90px;
	font-size: 9px;
	margin: 20px 10px;
}

/*give-up menu stuff*/
#give-up {
	position: absolute;
	background-color: #000000;
	bottom: 12px;
	height: 130px;
	width: 650px;
	z-index: 4;
	text-align: center;
}

#give-up p {
	margin-top: 25px;
	color: #FFFFFF;
}

#gameover {
	height: 650px;
	width: 900px;
	background-color: black;
	z-index: 9999;
    text-align: center;
}

#gameover div {
	margin-top: 235px;
	color: #FFFFFF;
}

/*item menu stuff*/

#healthitems {
	position: absolute;
	background-color: #000000;
	bottom: 12px;
	left: 125px;
	height: 140px;
	width: 350px;
	z-index: 4;
	overflow: scroll;
	overflow-x: hidden;
	text-align: left;
}

#healthitems p {
	color: #FFFFFF;
	margin: 20px;
	font-size: 8px;
}

#hitemlist {
	color: #FFFFFF;
	width: 340px;
	height: 90px;
	font-size: 9px;
	margin: 20px 10px;
}

#item-ask {
	position: absolute;
	background-color: #000000;
	bottom: 12px;
	left: 125px;
	height: 140px;
	width: 350px;
	z-index: 4;
	font-size: 7px;
}

#item-ask div {
	margin: 20px;
	text-align: left;
	color: #FFFFFF;
}

#itemback {
	position: absolute;
	left: 715px;
	bottom: 12px;
	background-color: #000000;
	color: white;
	padding: 5px;
	cursor: pointer;
	z-index: 4;
}

#itemback p {
	padding: 10px 20px;
}

.hitem:hover {
	cursor: pointer;
	color: yellow;
}


#items {
	overflow: scroll;
	overflow-x: hidden;
}

#itemdisplay {
	position: absolute;
	background-color: #000000;
	bottom: 12px;
	left: 505px;
	height: 140px;
	width: 180px;
	z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
}

#itemimg {
	height: 120px;
}

/* overworld item stuff*/

.item {
	height: 45px;
	width: 45px;
	position: absolute;
	z-index: 5;
	cursor: pointer;
}

.item:hover {
	filter: grayscale(100%);
}

/*town stuff*/

#town {
	position: absolute;
	bottom: 0;
	border-radius: 25px;
}



#townsky {
	position: relative;
	background-color: #6BF5FF;
	height: 650px;
	width: 3000px;
	left: -50px;
	border-radius: 0;
	background-image: url(https://img.freepik.com/free-photo/nature-colorful-landscape-dusk-cloud_1203-5705.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

#townfloor {
	position: absolute;
	width: 3000px;
	height: 100px;
	background-color: #FFF02C;
	left: -50px;
	bottom: 0;
	border-top-style: solid;
	border-top-color: #812564;
	border-top-width: 3px;
	z-index: 2;
	border-radius: 0;
	background-image: url(https://t4.ftcdn.net/jpg/02/59/14/31/360_F_259143134_BdNxyMFtkC0osFtewc0JzLIMlyZbselt.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

#townsky2 {
	position: relative;
	background-color: #6BF5FF;
	height: 650px;
	width: 3800px;
	left: -50px;
	border-radius: 0;
	background-image: url(https://img.freepik.com/free-photo/nature-colorful-landscape-dusk-cloud_1203-5705.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

#townfloor2 {
	position: absolute;
	width: 3800px;
	height: 100px;
	background-color: #FFF02C;
	left: -50px;
	bottom: 0;
	border-top-style: solid;
	border-top-color: #812564;
	border-top-width: 3px;
	z-index: 2;
	border-radius: 0;
	background-image: url(https://t4.ftcdn.net/jpg/02/59/14/31/360_F_259143134_BdNxyMFtkC0osFtewc0JzLIMlyZbselt.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

#exit {
	position: absolute;
	right: 150px;
	bottom: 10px;
	width: 100px;
	height: 100px;
	z-index: 5;
	color: #FFFFFF;
	font-size: 15px;
}

#exit:hover {
	color: yellow;
}

/*buildings*/

#cloverhouse {
	background-image: url("images/house3.png");
}

#jayhouse {
	background-image: url("images/house1.png");
}

#norahouse {
	background-image: url("images/house2.png");
}

#tall1 {
	background-image: url("images/city1.png");
}

#tall2 {
	background-image: url("images/city1.png");
}

#office {
	background-image: url("images/city2.png");
}

#library {
	background-image: url("images/city3.png");
}

/*environment stuff*/

.building {
	position: absolute;
	border-radius: 0px;
	background-size: cover;
	background-repeat: no-repeat;
	height: 532px;
	width: 650px;
	bottom: 80px;
	z-index: 1;
	cursor: pointer;
}

.building2 {
	position: absolute;
	border-radius: 0px;
	background-size: contain;
	background-repeat: no-repeat;
	height: 700px;
	width: 700px;
	bottom: -30px;
	z-index: 1;
	cursor: pointer;
}

.building:hover {
	filter: grayscale();
}

.building2:hover {
	filter: grayscale();
}

.npc {
	cursor: pointer;
}

.npc:hover {
	filter: grayscale();
}

/*overworld ui*/

.outui {
	position: absolute;
	background-color: #000000;
	height: 80px;
	width: 150px;
	bottom: 30px;
	cursor: pointer;
	z-index: 8;

}

#outitems {
	left: 700px;
}

.outui p {
	color: white;
	margin-top: 25px;
	text-align: center;
}

.outui p:hover {
	color: yellow;
}

#item-stuff {
	display: none;
	position: absolute;
	left: 12px;
    bottom: 18px;
	z-index: 8;
}

/*other*/

#guide {
	position: absolute;
	left: 100px;
    top: 100px;
	z-index: 10;
	display: none;
}

#prophecybackground {
	width: inherit;
	height: inherit;
	background-color: dimgrey;
}

.midimage {
	position: absolute;
	bottom: 305px;
	left: 250px;
	width: 400px;
}

#prison {
	position: relative;
}

#pispeech {
	position: absolute;
	left: 1240px;
	bottom: -400px; 
	width: 200px;
	color: white; 
}

#pi {
	position: absolute;
	left: 1240px;
	top: 420px;
}

/*corridor backgrounds*/

#go-to {
	position: absolute;
    left: 1345px;
    bottom: 140px;
	width: 100px;
	height: 100px;
	z-index: 5;
	color: #FFFFFF;
	font-size: 15px;
}

#go-to:hover {
	color: yellow;
}

/* credits: https://www.pexels.com/photo/green-leaf-trees-on-forest-167698/ */
#forestsky {
	position: relative;
	background-color: #6BF5FF;
	height: 650px;
	width: 1000px;
	left: 300px;
	border-radius: 0;
	background-image: url(https://images.pexels.com/photos/167698/pexels-photo-167698.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
	background-size: cover;
	background-repeat: no-repeat;
}


/* credits https://www.istockphoto.com/photo/background-of-earth-and-dirt-gm96707219-6702256*/
#forestfloor {
	position: absolute;
	width: 1000px;
	height: 100px;
	background-color: #FFF02C;
	left: 300px;
	bottom: 0;
	border-top-style: solid;
	border-top-color: #812564;
	border-top-width: 3px;
	z-index: 2;
	border-radius: 0;
	background-image: url(https://media.istockphoto.com/id/96707219/photo/background-of-earth-and-dirt.jpg?s=1024x1024&w=is&k=20&c=JXWYhoy1vbiqHEg11blI0bGwCRCK7fdTb4qD0NqkiM4=);
	background-size: cover;
	background-repeat: no-repeat;
}


/* credits: https://www.pexels.com/photo/rock-wall-in-cave-11122922/*/
#cavewall {
	position: relative;
	background-color: #6BF5FF;
	height: 650px;
	width: 1000px;
	left: 300px;
	border-radius: 0;
	background-image: url(https://images.pexels.com/photos/11122922/pexels-photo-11122922.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
	background-size: cover;
	background-repeat: no-repeat;
}


/* credits: https://www.freepik.com/premium-photo/tilled-earth-as-agricultural-background_2278893.htm#query=dirt%20ground&position=6&from_view=keyword&track=ais_user&uuid=c606604b-bd8e-425f-820f-5f3f0342de5d*/

#cavefloor {
	position: absolute;
	width: 1000px;
	height: 100px;
	background-color: #FFF02C;
	left: 300px;
	bottom: 0;
	border-top-style: solid;
	border-top-color: #812564;
	border-top-width: 3px;
	z-index: 2;
	border-radius: 0;
	background-image: url(https://img.freepik.com/premium-photo/tilled-earth-as-agricultural-background_40369-66.jpg?w=1380);
	background-size: cover;
	background-repeat: no-repeat;
}

#buildingwall {
	position: relative;
	background-color: #6BF5FF;
	height: 650px;
	width: 1000px;
	left: 300px;
	border-radius: 0;
	background-color: antiquewhite;
	background-size: cover;
	background-repeat: no-repeat;
}

#buildingfloor {
	position: absolute;
	width: 1000px;
	height: 100px;
	background-color: #FFF02C;
	left: 300px;
	bottom: 0;
	border-top-style: solid;
	border-top-color: #812564;
	border-top-width: 3px;
	z-index: 2;
	border-radius: 0;
	background-image: url(https://t4.ftcdn.net/jpg/02/59/14/31/360_F_259143134_BdNxyMFtkC0osFtewc0JzLIMlyZbselt.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

.artifact {
    position: absolute;
    left: 500px;
    top: -60px;
    z-index: 3;
}

.artifact2 {
	height: 650px;
	width: 900px;
}

.title {
    position: absolute;
    top: 80px;
	color: white;
	text-align: center;
}

#tocave {
    position: absolute;
    left: 3000px;
    top: 400px;
    z-index: 5;
}