/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  margin: 0px;
  height: 0px;
  color: white;
  font-family: Sylfaen;
	background-image: url('background2.png');
	background-size: cover;
	background-attachment: fixed;
}

.main {
	text-align: center;
	max-width: 768px;
	min-width: 50%;
	margin: auto;
}

.content1 {
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
}

.side {
	position: relative;
	top: 520px;
	right: 370px;
}

/* top 170, right 30 */

#lamp {
	background-image: url("lamp2.gif");
	width: 174px;
	height: 282px;
	position: absolute;
	margin: auto;
	top: 620px;
	left: 0;
	right: 400px;
	bottom: 0;
	z-index: -2;
	/*margin-left: 5%;
	margin-top: 5%;*/
	pointer-events: none;
}

/*
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
*/

#moth {
	background-image: url("moth-b.gif");
	width: 202px;
	height: 202px;
	position: absolute;
	margin: auto;
	top: 620px;
	left: 0;
	right: 700px;
	bottom: 0;
	z-index: -3;
	pointer-events: none;
}

#moth2 {
	background-image: url("moth-c.gif");
	width: 202px;
	height: 202px;
	position: absolute;
	margin: auto;
	top: 700px;
	left: 0;
	right: 280px;
	bottom: 0;
	z-index: -3;
	pointer-events: none;
}

#moth3 {
	background-image: url("moth1.gif");
	width: 202px;
	height: 202px;
	position: absolute;
	margin: auto;
	top: 540px;
	left: 0px;
	right: 180px;
	bottom: 0;
	z-index: -1;
	pointer-events: none;
}

#patchy {
	background-image: url("patchy.png");
	width: 400px;
	height: 573px;
	transform: scale(0.25);
	position: absolute;
	margin: auto;
	top: 450px;
	left: 0;
	right: 100%;
	bottom: 0;
	z-index: -101;
	pointer-events: none;
}

#moon {
	background-image: url("moon.png");
	width: 216px;
	height: 207px;
	transform: scale(2.5);
	position: absolute;
	margin: auto;
	top: 220px;
	left: 250px;
	right: 0px;
	bottom: 0;
	z-index: -100;
	pointer-events: none;
}

#label {
	background-image: url("label1b.png");
	width: 291px;
	height: 160px;
	position: absolute;
	margin: auto;
	
	left: 0;
	right: 0px;
	bottom: 180px;
	z-index: -4;
	pointer-events: none;
}

#mockbuttons1 {

}

#mockicon1 {
	/* for the return home button */
}

#mockicon2 {
	/* for the greenhouse (gallery) button */
}

#mockicon3 {
	/* for the alchemylab (devblog) button */
}

#mockbg {
	background-image: url("mockbg.png");
	width: 229px;
	height: 141px;
	transform: scale(2);
	position: absolute;
	margin: auto;
	top: 450px;
	left: 420px;
	right: 0px;
	bottom: 0;
	z-index: -30;
	pointer-events: none;
}

#mock6 {
	background-image: url("mock6.png");
	width: 128px;
	height: 128px;
	transform: scale(2.25);
	position: absolute;
	margin: auto;
	top: 610px;
	left: 400px;
	right: 0px;
	bottom: 0;
	z-index: -11;
	pointer-events: none;
}

#mock8 {
	background-image: url("mock8.png");
	width: 256px;
	height: 256px;
	transform: scale(1.5);
	position: absolute;
	margin: auto;
	top: 540px;
	left: 700px;
	right: 0px;
	bottom: 0;
	z-index: -12;
	pointer-events: none;
}

#mock9 {
	background-image: url("mock9.png");
	width: 256px;
	height: 256px;
	transform: scale(1.25);
	position: absolute;
	margin: auto;
	top: 460px;
	left: 0px;
	right: 50px;
	bottom: 0;
	z-index: -10;
	pointer-events: none;
}

#mock10 {
	background-image: url("mock10.png");
	width: 128px;
	height: 128px;
	transform: scale(1.75);
	position: absolute;
	margin: auto;
	top: 440px;
	left: 0px;
	right: 350px;
	bottom: 0;
	z-index: -13;
	pointer-events: none;
}

#castle1 {
	background-image: url("castle1b.png");
	width: 153px;
	height: 214px;
	transform: scale(1);
	position: absolute;
	margin: auto;
	top: 590px;
	left: 80px;
	right: 0px;
	bottom: 0;
	z-index: -10;
	pointer-events: none;
}