/*general body*/
body {
	/*background-color: #eaebed;*/
}


/*buttons*/
#sides button {
	font-family: 'IM Fell English', serif;
	font-size: 20px;
	background-color: transparent;
	border: none;
	color: black;
	margin-top: 10%;
	margin-left: 50px;


}

.main-button button {
	font-family: 'IM Fell English', serif;
	font-size: 20px;
	line-height: 14px;
	background-color: transparent;
	border: none;
	margin: 10px;
	color: black;
	margin-left: 50px;
}



/*list*/
#moms-side li {
	list-style: none;
	color: red;

	
}

#dads-side li {
	list-style: none;
	
	 
}

#other li {
	list-style: none;
	
	 
}


/*doing this to keep images same size on start page*/
#photos-to-filter {
	position: absolute;
	margin-left: 37%;
	margin-top: 10%;
	
}
.photo-class {
	position: absolute;
	height: 300px;
	padding: 1.5px;
	

}

#close {
	position: absolute;
	margin-top: -170px;
	margin-left: 95%;
	font-family: 'IM Fell English', serif;
	font-size: 20px;
	background-color: transparent;
	border: none;
	
}


/*make a state where when you click the button, the position changes 

probably easiest to do in js 

*/