@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Square+Peg&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/** {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}*/

.mainpage {
	margin: 0;
	padding: 0;
	height: 100%;
	/*background-color: #fef5e3;*/
	background-color: white;
}

.artpage {
	margin: 0;
	padding: 0;
	background-color: white;
}

.soil {
	background-color: rgb(71,46,25);
}

.why {
	margin: 0;
	padding: 30% 30% 10% 10%;
}

@media screen and (max-width:1500px) {
	.why {
		padding: 38% 25% 10% 10%;
	}
}

@media screen and (max-width:1230px) {
	.why {
		padding: 50% 25% 10% 10%;
	}
}

@media screen and (max-width:1020px) {
	.why {
		padding: 55% 20% 10% 10%;
		width: 40%;
	}
}

@media screen and (max-width:800px) {
	.why {
		padding: 55% 15% 10% 10%;
		width: 30%;
	}

	h2 {
		line-height: 1.1;
		font-size: 20px;
	}
}


/*.subheading {
	color: rgb(71,46,25);
}*/

h1 {
	margin: 0;
	padding: 0 0 5px 0;

	
	color: #B5838D;
/*color: #a07d84;*/
	font-family: 'Special Elite', monospace;


}

.what {
	padding: 10% 0 0 10%;
	margin: 0;
}


.artworkorganizer {
	padding: 2% 10% 0 10%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.experienceorganizer {
	padding: 2% 10% 0 10%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.artwork {
	
	width: 350px;
	margin: 0 0 10px 0;
	padding: 0;
	position: relative;
}

.experience {
	
		width: 300px;
	margin: 0 0 10px 0;
	padding: 10px;
	position: relative;
	border: 3px solid #B5838D;
}

.artwork:hover .overlay {
	opacity: 0.85;
}



.artworkimage {
	margin: 0;
	padding: 0;
	display: block;
  	width: 100%;
  	height: auto;

}

.limit-width {
	width: 200px;
}

.sewingwork {
	
	width: 300px;
	margin: 0 0 10px 0;
	padding: 0;
	position: relative;
	background-color: #fbe4d4;
	display: flex;
}

/*.sewingwork:hover .overlay {
	opacity: 0.85;
}*/

.sewingimage {
	margin:0px;
	padding: 0;
/*	display: block;*/
/*  	width: 200px;*/
height: 400px;
/*  	height: auto;*/
/*  	top: 100%;*/
  	

}

.sewingtext {
	margin: 50px 30px 50px 0px;
	font-family: 'Special Elite', monospace;
	color: #804E58;

}

.justsoquirky {
	width: 100%;
	margin: 0 0 10px 0;
	padding: 0;
	position: relative;

}

.justsoquirky:hover .overlay {
	opacity: 0.85;
}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #FFFFFF;
}

.text {
  color: #6D6875;
  font-size: 20px;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;

}

/*1230*/
h2 {
	margin: 0;
	padding: 0 0 4px 0;
	color: #6D6875;
	/*font-family: serif;*/
 font-family: 'Square Peg', cursive;

font-size: 37px;


	font-weight: 100;

}

a {
	margin: 0;
	padding: 0;
/*	color: #E5989B;*/
color: #967880;
	font-family: 'Special Elite', monospace;
	text-decoration: none;

}

.inlinelink {
	font-family: 'Alegreya Sans', sans-serif;
}

a:hover {
	color: #B5838D;
	transition: color 0.5s;
	text-decoration: none;
}


.tree {
	background-image: url("assets/images/tree3.png");
	height: 100%;
	margin: 0;
	padding: 0;
	/*float: right;*/
	background-position: right;
	background-repeat: no-repeat;
  	background-size: contain;



}

.project {
	width: 300px;
	height: 450px;
	margin: 0 0 20px 0;
	padding: 20px;
	position: relative;
/*	border: 3px dashed #B5838D;*/
/*border: 5px double #B5838D;*/
background-color: #f3e7e7;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(71,46,25,0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.project:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 6px 16px rgba(71,46,25,0.12);
}




.demo {
	margin: 0;
	padding: 1px;
	display: block;
  	width: 100%;
  	height: auto;
  box-shadow: 0 4px 12px rgba(71,46,25,0.08);
  border-radius: 4px;
}



.explanation {
	margin: 0;
	padding: 10px 0 0 0;
/*	color: #6D6875;*/
color: rgb(71,46,25);
	font-family: 'Alegreya Sans', sans-serif;
	text-decoration: none;
}

.projectname {
	color: #85636D;
/*	#967880;*/
	text-align: center;
/*	color: rgb(71,46,25);*/
/*font-family: 'Alegreya Sans', sans-serif;
font-weight: 400;*/
}

.projecttools {
	color: #967880;
/*	#967880;*/
	text-align: center;
/*	color: rgb(71,46,25);*/
font-family: 'Alegreya Sans', sans-serif;
font-weight: 400;
	margin-top: 0px;
	margin-bottom: 7px;
	font-size: 19px;
}

@media screen and (max-width:776px) {
	/*idk man*/
	.tree {
		/*background-image: none;*/
		background-image: url("assets/images/tree3.png");
		height: 100vh;
		margin: 0;
		padding: 0;
		/*float: right;*/
		background-position: bottom;
		background-repeat: no-repeat;
  		background-size: contain;


	}

	.why {
		margin: auto;
		width: 70%;
		padding: 5%;

	}
}