/* 
	Author: Michelle C. Basey
	Project: michellebasey.com
	Purpose: Body, Header, Page, Footer CSS

*/

/* ~~~~~~ Body ~~~~~~ */

body {
	background-color: var(--backgroundColor_global); 
	color: var(--textColor_global);
	font-family: var(--font_global);
}

/* ~~~~~~ Customizations ~~~~~~ */

.siteTagline {
	font-family: var(--font_contrast1);
	font-style: italic;
}
.fancyFont1 {
	font-family: var(--font_fancy1);
	font-size: var(--fontSize_fancyFont1);
}
.fancyFont2 {
	font-family: var(--font_fancy2);
		font-size: var(--fontSize_fancyFont2);
		vertical-align: sub;
}



/* ~~~~~~ Header ~~~~~~ */

.logoMenu {

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	margin-bottom: var(--marh_logoMenu);

}

.logoGlobal {	
	padding-left: var(--padw_logo);	
	margin-right: auto;
}

.logoGlobal > p {
	color: var(--textColor_logo);

	text-align: center;
}

.logoGlobalImg {	height: var(--imgh_logo);	}


.essence {
	
	color: var(--textColor_essence);
	text-shadow: var(--textShadow_essence);

	font-family: var(--font_contrast2);
		font-size: var(--fontSize_essence);
		font-style: italic;
		text-align: center;	

	margin-left: auto;
	margin-right: auto;
}

/* opera on (older)macOS looks like hell but I lost the
tab explaining how to detect opera so all I have
is detecting macOS:
@supports (-webkit-font-smoothing) {} // detects macOS
*/

@media not all and (min-resolution:.001dpcm) {
	/* safari is a farty-poo-head */
	.essence {
		text-shadow: var(--textColor_essence);
	}
}




.menuGlobal {
	width: var(--imgh_menuGlobal);
	height: var(--imgh_menuGlobal);
	
	margin-left: auto;

	background-image: var(--img_menuGlobal);
	background-size: var(--imgh_menuGlobal) var(--imgh_menuGlobal);
	background-repeat: no-repeat;
	color: var(--textColor_menuGlobal);

	border-color: var(--brdColor_global);
	border-style: var(--brdStyle_menuGlobal);
	border-width: var(--brdw_global);
}

.menuGlobalOpen {
	visibility: hidden;
}

.menuGlobalTest {
	color: var(--textColor_global);
	text-decoration: none;
	font-size: 78%;

	border-color: var(--brdColor_global);
	border-style: var(--brdStyle_menuLand);
	border-top-width: 0;
	border-bottom-width: 0;
	border-right-width: 3px;
	border-left-width: 3px;

	border-radius: 50%;

	padding-top:	var(--padh_menuLand);
	padding-bottom:	var(--padh_menuLand);
	padding-left:	var(--padw_menuLand);
	padding-right:	var(--padw_menuLand);

}

.menuGlobalTest:hover {
	font-size: 80%;
	color: var(--brdColor_global);

	border-color: var(--brdColor_global);
	border-style: var(--brdStyle_hoverMenuLand);

	border-radius: 50%;

	border-top-width: 3px;
	border-bottom-width: 3px;
	border-right-width: 2px;
	border-left-width: 2px;

	padding-top:	var(--padh_menuLand);
	padding-bottom:	var(--padh_menuLand);
	padding-left:	var(--padw_menuLand);
	padding-right:	var(--padw_menuLand);
}



.galleryArt {
	visibility: visible;
}

button + .menuGlobalOpen:active,
button:focus-within + .menuGlobalOpen {
	visibility: visible;
}

/* ~~~~~~ Prose ~~~~~~ */ 

/* DEFINED IN GALLERY.CSS, REM FOR NOW & TEST
.galleryOfProse {
	background-color: var(--textColor_contr);
}
*/

/* ~~~~~~ Footer ~~~~~~ */ 

footer {
	background-color: var(--backgroundColor_global);
	color: var(--textColor_footer);

	font-family: var(--font_contrast1);
	font-size: var(--fontSize_footer);
	font-style: italic;
	text-align: center;

	padding: var(--pad_footer);
}