* {
	font-family: "helvetica", sans-serif;
	transition: opacity 400ms;
}

body {
	margin: 0px;
}




h1 {
	font-family: "georgia", serif;
	color: rgb(51, 0, 51);
}

h2 {
	font-family: "georgia", serif;
	color: rgb(51, 0, 51); 
}



.sidepanel {
width: 25%;
height: 100%;
padding-top: 0px;
position: fixed;
background-color: rgb(51, 0, 51);
box-shadow: 5px 0px 5px darkgray;
overflow: auto;
}	


.placard {

	height: 25%;
	width: 100%;

	overflow: hidden;
	
}


.name {
	display:table;

	height: 100%;
	width: 100%;


}

.nametext {display: table-cell; vertical-align: middle; text-align: center;}
	
.nametext h2 {
	font-family: "georgia", serif;
	font-size: 2em;
	font-weight: bold;
	color: white;
	margin: 0px;
	font-variant: small-caps;
}

.navbar {
	padding-top: 0
	



}



.navbar ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	
}
	
.navbar li {
	text-align: left;
	
	
}
.navbar a {
	display: block;
	color: white;
	text-decoration: none;
	padding: 16px;
	font-family: arial;
}

.navbar a:hover {
    
	opacity: 0.5;
}

.active {
	background-color: rgb(102, 0, 102);
}

.main {
	height: 100%;
	width: 75%;
	position: absolute;
	left: 25%;
}



.headshot {
	background-image: url("headshot.jpg");
	height: 75%;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	
}


.headshot-text {
	text-align: center;
	padding-top: 16px;
}

.headshot-text h1 {
	margin: 0px;
}

.wrapper {
padding: 16px;
}

.wrapper h2 {
	margin: 0px;
}

.button {
	display: inline-block;
	background-color: rgb(51, 0, 51);
	padding: 6px;
	border-radius: 4px;
	
	text-align: center;
	text-decoration: none;
	color: white;
	cursor: pointer;
}

.button:hover {
	opacity: 0.5;
}

.socials {
	margin-bottom: 16px;
	
}

.centerIcons {
	display: flex; 
	justify-content: center; 
	height: 56px;
}
.centerIcons a {
	display: inline-block; 
	height: 100%; 
	padding: 0px 8px;
}

#fbLogo { height: 100%}
#fbLogo #path1 { fill-opacity: 1; transition: fill-opacity 400ms; }
#fbLogo:hover #path1 { fill-opacity: 0.5; transition: fill-opacity 400ms;}

#ytLogo { height: 100%}
#ytLogo #path9 { fill-opacity: 1; transition: fill-opacity 400ms;}
#ytLogo:hover #path9 { fill-opacity: 0.5; transition: fill-opacity 400ms;}

.footer {
	display: flex; 
	align-items: center; 
	height: 56px;
}
	
@media (width <= 700px) {
	.sidepanel {
		width: 100%;
		height: auto;
		position: static;
		box-shadow: 0px 5px 5px darkgray;


	}
	
	.placard {
		width: 100%;
		height: auto;
		padding-top: 16px;
		padding-bottom: 16px;
		position: static;
		
	}
	
	.navbar {
		width: 100%;
		height: auto;
	}
	
	.navbar li {
		text-align: center;
	}
	
	.main {
		width: 100%;
		height: auto;
		padding-top: 16px;
		position: static;

		
	}

	.headshot {
		width: 95%;
		height: 300px;
		
		position: static;
		margin: auto;
	}
	
}