body {
	margin: 0px; font-size: 16px; background-color: GhostWhite; overflow-y: scroll;
}

.boxShadowed {box-shadow: 2px 2px 4px rgb(64,64,64), -2px -2px 4px rgb(192,192,192);}
.dropShadowed {filter: drop-shadow(2px 2px 4px rgb(64,64,64)) drop-shadow(-2px -2px 4px rgb(192,192,192));}

#pageBG {
	position: fixed; width: 100vw; height: 100vh;
	background-position: center; background-size: 80vh; background-repeat: no-repeat;
	background-image: url("../res/img/photo/leafheart800.png");
	opacity: 0.15; z-index: 100;		
}
#pageHeader {margin: 0; padding: 0px; user-select: none;}
#pageHeaderLogo {
	display:block; position: fixed; top: 0px; left: 0px; margin: 16px; width: 96px; height: 54px;
	background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url("../res/img/leafheart128.png");
	cursor: pointer; z-index: 200;
}
#pageInfo {}
#pageTitle {
	font-family: Cinzel; 
	text-shadow: 0px 0px 5px White;
	color: Maroon;
}
#pageDescription {}
#topNav {
	display: inline-block; text-align: center; position: relative;
	margin: 8px 104px; width: calc(100% - 208px); z-index: 600;
	user-select: none;
	
	position: sticky; top: 0px; margin: 0px 104px; padding: 16px 0px; 
	background: linear-gradient(to bottom, GhostWhite 85%, rgba(0, 0, 0, 0));
}
#topNav a {
	display: inline-block; margin: 4px 32px; line-height: 2rem;
	font-size: 1.5rem; font-weight: bold; text-decoration: none; 
	font-family: Cinzel, sans-serif; color: SaddleBrown; cursor: pointer;
	filter: drop-shadow(2px 2px 4px rgb(96,96,96)) drop-shadow(-2px -2px 4px rgb(192,192,192));
	transition: color 0.2s;
}
#topNav a:hover {color: Peru;}
#topNav .current {color: Black; cursor: default;}
#topNav .current:hover {color: Black;}
#main {position: relative; width: 100%; min-height: calc(100vh - 6.5rem); z-index: 400;}
#mainContent {
	display: inline-block;
	width: calc(100% - 256px); margin: 16px 128px;
	text-align: center;	font-size: 1.4rem; font-family: sans-serif;
}
#main-Content * {
	margin: auto;
}
h2 {font-size: 2rem; font-weight: bold; font-family: Garamond;}
h3 {font-size: 1.75rem; font-weight: bold; font-family: Garamond;}
.text {display: inline-block; margin: 0px 64px;}
.audioPlayer {display: inline-block; text-align: center; margin:8px 0px;  width: 100%;}
.audioItem {display: inline-block; margin:8px 0px;}
#pageFooter {
	display: inline-block; position: relative; box-sizing: border-box;
	padding: 4px 16px; width: 100%; z-index: 500;
	font-weight: bold; color: Black; user-select: none;
}
#pageCopyright {
	display: inline-block; text-align: right; float: right;
	font-size: 0.75rem; line-height: 1rem; font-family: sans-serif;	
}
#socialLinks {position: fixed; text-align: center; left: 16px; bottom: 16px; z-index: 600;}
.socialLink {
	display: inline-block; margin-right: 8px;
	width: 48px; height: 48px;
	background-position: center; background-size: contain;
}
#fbLink {background-image: url("../res/icon/logo-facebook.svg");}
#instaLink {background-image: url("../res/icon/logo-instagram.svg");}
#googleLink {background-image: url("../res/icon/location.svg");}
#youtubeLink {background-image: url("../res/icon/logo-youtube.svg");}
#soundcloudLink {background-image: url("../res/icon/logo-soundcloud.svg");}
#mailLink {background-image: url("../res/icon/mail.svg");}
#embeddedMap {display:inline-block; background-color: Black; width: 600px; height: 450px;}
@media screen and (max-width: 856px) {
	#embeddedMap {width: calc(100% - 32px); height: 75vh; margin: 16px;}
}
@media screen and (max-width: 720px) {
	/*.event {margin: 8px 0px;}*/
	#pageBG {background-size: 80vw;}
	#pageHeader {text-align: center}
	#logoContainer {}
	#pageHeaderLogo {position: static; margin: 16px auto;}
	#topNav {width: 100%; margin: 0px;}
	#main {min-height: 1rem;}
	#mainContent {width: 100%; margin: 16px 0px}
	#socialLinks {position: relative; margin-bottom: 8px;}
	#socialLinks .socialLink {width: 32px; height: 32px; margin-right: 16px;}
	/*#pageFooter {color: White;}*/
}
@media print {}