@import url(https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;1,300&family=Julius+Sans+One&family=Libre+Baskerville&display=swap);

* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	font-family: 'libre baskerville', serif;
	line-height: 1.6;
}


/*THE HAMBURGER MENU*/

.nav {
	max-height: 0;
	transition: max-height .2s ease-out; /*the collapsing and expanding*/
}

.menu-icon {
	padding:28px 20px;
	position: relative;
	float:right;

}

.menu-icon .nav-icon {
	background:#333;
	display: block;
	height:2px;
	width: 18px;
	position:relative;
	transition:background .2s ease-out;

}

.menu-icon .nav-icon:before{
	background:#333;
	content:"";
	display:block;
	height:100%;
	width: 100%;
	position:absolute;
	transition:all .2s ease-out;
	top:5px;
}

.menu-icon .nav-icon:after{
	background:#333;
	content:"";
	display:block;
	height:100%;
	width: 100%;
	position:absolute;
	transition:all .2s ease-out;
	top:-5px;
}

.menu-btn{
	display:none;
}/*I think this gets rid of hte checkmark box and check*/

.menu-btn:checked ~ .nav{
	max-height:240px;
}


.menu-btn:checked ~ .menu-icon .nav-icon{
	background:white; /*transparent wasn't working, so it's white here*/
}

.menu-btn:checked ~ .menu-icon .nav-icon:before{
	transform: rotate(-45deg);
	top:0;
}

.menu-btn:checked ~ .menu-icon .nav-icon:after{
	transform: rotate(45deg);
	top:0;
}


.headerMenu ul {
	overflow:hidden;
}

.headerMenu ul a{
	/*display: block;*/
	padding: 10px;
}



/*======HEAD AND NAV BAR STYLING======*/

.about {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

.about3 {
	padding-top: 30px;

}

header {
	margin: 15px;
	padding: 15px;
}

.nav li a {
	font-size: 12px;
	color: black;
}

.nav li a:hover{
	color: #7c6ea7;
}

header p {
	font-size: 13px;
}

header h1 {
	font-size: 20px;
}



/*HOME PAGE*/
.headshot {
	width: 300px;
}

.pageContent {
	margin: 10px;
	padding: 10px;
}						

.pageContent2 {
	margin: 10px;
	padding: 10px;
}

.contactLinks .button {
	margin: 30px;
	color: black;
}

div p {
	font-size: 13px;
}

.contactLinks a {
	font-size: 12px;
	color: black;
}

.contactLinks a:hover{
	color: #7c6ea7;
}


/*OTHER PAGES
*/

.pageContent2 ul li {
	list-style-type: circle;
	margin: 0 0 0 40px;
}

/*===== TEXT ON ALL PAGES ======*/


h2 {
	padding: 5px 0px;
	font-size: 16;
}

h3 {
	padding: 5px 0px;
	font-style: italic;
	font-size: 14;
}

h4 {
	padding: 5px 0px;
	font-size: 13;
}

.indent1 {
	padding: 20px;
}



/*FOR TABLET SCREENS*/

@media /*only screen and*/ (min-width: 850px) {

	.nav {
 		margin: 10px;
		height: 50px;
 		display: flex;
 		justify-content: center;  
 		max-height: none;
 	}


	.menu-icon{
		display:none;
	}

	.nav li a {
		font-size: 12px;
		padding:10px;
		margin: 15px;
	}

	header h1 {
		font-size: 26px;
	}

	div p {
		font-size: 15px;
	}

	.contactLinks a {
		font-size: 15px;
	}

	h2 {
		font-size: 1.2em;
	}

	h3 {
		font-size: 1em;
	}

	h4 {
		font-size: 1em;
	}

}


@media /*only screen and*/ (min-width: 1100px) {

	.nav li a {
		font-size: 17px;
	}

	header p {
		font-size: 18px;
	}

	header h1 {
		font-size: 32px;
	}

	.pageContent2 {
		margin: 0 auto; /*this centers everythin!*/
		padding: 20px;
		width: 58%;
	}

	.about {
		display: flex;
		justify-content: center;
		flex-direction: row;
	}

	.about2 {
		padding: 20px;
		width: 35%;
	}

	.headshot {
		margin-left: 25px;
	}

	.about3 {
		margin-left: auto;
		margin-right: auto;
		width: 50%;
	}

}