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

#close {
	position: absolute;
	margin-top: -40px;
	margin-left: 95%;
	font-family: 'Reenie Beanie', cursive;
	font-size: 30px;
	background-color: transparent;
	border: none;
	
}

/*buttons*/
#sides button {
	font-family: 'Reenie Beanie', cursive;
	font-size: 30px;
	background-color: transparent;
	border: none;
	margin: 10px;
	color: black;


}

.main-button button {
	font-family: 'Reenie Beanie', cursive;
	font-size: 30px;
	background-color: transparent;
	border: none;
	margin: 10px;
	color: #162b56;
}



/*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: 35%;
	margin-right: 25%; 
	
}
.photo-class {
	height: 300px;
	/*padding: 1.5px;*/
	

}


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

probably easiest to do in js 

*/