/* Pear Styles */

html {
  scroll-behavior: smooth;
}

body {
	background-color: #5D9E5A;
	margin: 0 auto;
	padding: 0;
	background-image: url("images/forest-background.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
	background-size: cover;
	/*background: rgb(0,0,0);
	background: linear-gradient(252deg, rgba(0,0,0,1) 0%, rgba(68,68,68,1) 100%); */
} 
	
/* ---------- GOOGLE FONTS ---------- */

/* Pixel Titles */
.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Handwriting Body */
.klee-one-regular {
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
}


/* Handwriting Titles */
.chelsea-market-regular {
  font-family: "Chelsea Market", system-ui;
  font-weight: 400;
  font-style: normal;
}



/* ----------TEXT STYLES ---------- */

	h1, h2 {
		color: #C1FF38; font-family: "Jersey 10", sans-serif; font-weight: normal; text-align: center;;
	}

	h1 {font-size: 100px; margin: 0.3em 0.2em 0.1em 0.2em; letter-spacing: 1px;}
	h2 {font-size: 2.8em; margin-top: 0.1em; padding: 0 10px}


/* Code Snippets
	box-shadow:2px 4px 8px 0 rgba(0,0,0,0.5);
	color: #B38FD9; 
	div.ex1 {
	overflow: scroll;}
}
}*/
	




/* ---------- WEBSITE HEADING ---------- */
header {
	max-width: 100%;
	margin: 0 auto;	
	padding: 0 10px 0px 10px;
}

header img {
	display: inline;
	position: relative;
	top: 15px;
	/*border-radius: 200px;
	box-shadow:2px 4px 8px 0 rgba(0,0,0,0.5);
	margin-bottom: 10px;*/
}


/* ---------- STRUCTURE ---------- */

.mushroom {
}

.mushroom img{
	margin: 0;
	padding: 0;
	display: block;
}

.ground {
	margin: 0 auto;
	display: block;
	padding: 0;
	max-width: 600px;	
	
}

.ground a {line-height: 0; padding: 0; margin: 0;}


.arrows {
	margin: 0 auto;
	padding: 0;
	width: 160px;
	display: block;
	height: 50px;
}

.arrows img {width: 40px; padding: 0; display: inline-block; position: relative; top: 10px;  }

img.arrowleft {right: 80px; rotate: -210deg;}
img.arrowright {right: -140px; rotate: -150deg; }

.top {margin: 0; height: 200px;}

.top img {
	
}

.soil-top{
	margin: 0;
	height: 140px;
	background-image: url("images/soil-top_2.png");
	background-repeat: repeat;
	background-position: center top;
}

.soil {
	max-height: 320px;
	/*width: display;*/
	margin: 0;
	background-image: url("images/soil-background.jpg");
	background-repeat: repeat;
	background-position: center top;
}

a {line-height: 0; padding: 0; margin: 0; position: relative;}

#mushroom-house {
	margin: 0 auto; display: block; max-width: 80%; padding: 0; z-index: 10; position: relative; top: 30px;
}



#clump1 {
	display: block; width: 170px; height: 160px; padding: 0; z-index: 20; position: relative; top: -435px; right: -40px;
}

#clump2 {
	display: block; width: 200px; height: 152px; padding: 0; z-index: 3; position: relative; top: -604px; right: -360px;
}

#glitter {margin: 0 auto; display: block; width: 140px; height: 300px; padding: 0; z-index: 30; position: relative; top: -330px;}


#roots {
	margin: 0 auto; display: block; z-index: 3; position: relative; top: -597px; width: 100%;
}

#hollow  {
	margin: 0 auto; display: block; z-index: 1; position: relative; top: -110px; width: 100%;
}


#titles {
	margin: 0 auto; display: block; z-index: 5; position: relative; top: -340px; width: 100%;
}

#lore {
	z-index: 20; width: 70px; height: 25px; position: relative; top: -420px; right: -50px;
}

#lore:hover {
	width: 78px;
	top: -421px; 
	right: -47px;
}

#games {
	z-index: 20; width: 80px; height: 20px; position: relative; top: -288px; right: -45px;
}

#games:hover {
	width: 90px;
	top: -288px; 
	right: -40px;
}

#characters {
	z-index: 20; width: 110px; height: 20px; position: relative; top: -375px; right: -145px;
}

#characters:hover {
	width: 114px;
	top: -375px; 
	right: -142px;
}

#pears {
	z-index: 20; width: 98px; height: 31px; position: relative; top: -405px; right: -318px;
}

#pears:hover {
	width: 105px;
	top: -405px; 
	right: -314px;
}

#about {
	z-index: 20; width: 112px; height: 32px; position: relative; top: -480px; right: -447px;
}

#about:hover {
	width: 118px;
	top: -480px; 
	right: -445px;
}

#gallery {
	z-index: 20; width: 120px; height: 31px; position: relative; top: -376px; right: -408px;
}

#gallery:hover {
	width: 130px;
	top: -376px; 
	right: -402px;
}

#diary {
	z-index: 20; width: 120px; height: 45px; position: relative; top: -418px; right: -230px;
}

#diary:hover {
	width: 128px;
	top: -418px; 
	right: -225px;
}

#jeep-doop {
	z-index: 20; width: 67px; position: relative; top: -447px; right: -167px;
}

#book {
	z-index: 24; width: 45px; position: relative; top: -510px; right: -210px;
}



/* ---------- PEAR CHARACTERS ---------- */


footer {margin: 0; background: #0A0805;}


.clearfix{
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}







	@media screen and (min-width: 1024px) {
	}

	/* Collapsing tables */
	
@media screen and (max-width: 1024px) {

			
}


/* ---------- Display 800px or Less ---------- */

@media screen and (max-width: 800px) {

		body::before {
		  content: '';
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100vw;
		  height: 100vh;
		  background-image: url("images/forest-background.jpg");
		  background-size: cover;
		  background-position: center;
		  z-index: -1;
		}


		
		header {
			padding-top: 50px;
		}

	
}  


/* ---------- Display 600px or Less ---------- */		


@media screen and (max-width: 600px) {
		
		header{
			padding: 60px 10px 0px 10px;
		}
		
		h1 {font-size: 50px;}



		body {
			/*background-image: url("images/cube-background_dark.jpg");
			background-repeat: repeat-y;
			background-attachment: fixed;
			background-position: top top;
			background-size: auto;*/
			
			
			} 
		
		.ground {
			margin: 0 auto;
			display: block;
			padding: 0;
			max-width: 300px;	
		}
	
		.soil {
			max-height: 180px;
			/*width: display;*/
			margin: 0;
			background-image: url("images/soil-background.jpg");
			background-repeat: repeat;
			background-position: center top;
		}


		.top {
			margin: 0;
			height: 30px;
		}
		
		#mushroom-house {
			top: -12px;
		}
		
		.arrows {
			height: 65px;
		}
		
		.arrows img {
			width: 25px;
		}
		
		img.arrowleft {right: 18px; top: -2px;}
		img.arrowright {right: -120px; top: -2px;}

		#roots {
			top: -333px;		
		}
	
		
		#hollow  {
			top: -80px;
		}
		
		#clump1 {
			width: 95px; height: 90px; top: -245px; right: -19px;
		}

		#clump2 {
			width: 110px; height: 84px; top: -339px; right: -175px;
		}

		#glitter {display: block; width: 76px; height: 140px; padding: 0; z-index: 30; position: relative; top: -180px;}

		#lore {
			z-index: 20; width: 40px; height: 14px; position: relative; top: -238px; right: -22px;
		}

		#lore:hover {
			width: 44px;
			top: -238px; 
			right: -20px;
		}

		#games {
			z-index: 20; width: 43px; height: 10px; position: relative; top: -172px; right: -21px;
		}

		#games:hover {
			width: 47px;
			top: -172px; 
			right: -19px;
		}

		#characters {
			z-index: 20; width: 55px; height: 8px; position: relative; top: -216px; right: -72px;
		}

		#characters:hover {
			width: 60px;
			top: -216px; 
			right: -71px;
		}

		#pears {
			z-index: 20; width: 44px; height: 14px; position: relative; top: -230px; right: -162px;
		}

		#pears:hover {
			width: 50px;
			top: -230px; 
			right: -158px;
		}

		#about {
			z-index: 20; width: 58px; height: 16px; position: relative; top: -267px; right: -222px;
		}

		#about:hover {
			width: 61px;
			top: -267px; 
			right: -221px;
		}

		#gallery {
			z-index: 20; width: 68px; height: 18px; position: relative; top: -213px; right: -198px;
		}

		#gallery:hover {
			width: 74px;
			top: -213px; 
			right: -196px;
		}

		#diary {
			z-index: 20; width: 84px; height: 35px; position: relative; top: -232px; right: -90px;
		}

		#diary:hover {
			width: 88px;
			top: -232px; 
			right: -88px;
		}

		#jeep-doop {
			z-index: 20; width: 42px; position: relative; top: -418px; right: -175px;
		}

		#book {
			z-index: 24; width: 32px; position: relative; top: -292px; right: -78px;
		}





		
		footer {
			padding: 30px;
		}

		footer hr {
			display: block;	
		}
		
		footer h4 {
			display: none;
		}
		
	}