/* 
	Author: Michelle C. Basey
	Project: michellebasey.com
	Purpose: Prose CSS / Gallery CSS / GalleryOfSound CSS

*/

/* ============ Prose ============ */

.centerMe {		text-align: center;		}

.proseParaSilver {	color: var(--textColor_proseParaSilver);	}

.proseParaFont_contrast {
	text-align: center;
	font-family: var(--font_contrast1);

}


/* ============ Galleries ============ */

.gallery {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;

		background-color: var(--backgroundColor_gallery);
		border-color: var(--brdColor_global);
		border-style: var(--brdStyle_gallery);
		border-width: var(--brdw_global);

}

.galleryOfSong {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
	background-color: var(--backgroundColor_galleryOfSong);  

	border-color: var(--brdColor_global);
	border-style: var(--brdStyle_gallery);
	border-width: var(--brdw_galleryOfSong);

	padding-bottom: var(--padh_galleryOfSong);
}


.galleryOfProse {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
.galleryOfProse {
		display: block;
		background-color: var(--backgroundColor_galleryOfProse);
		color: var(--brdColor_global);

		border-color: var(--backgroundColor_galleryOfSong);
		border-style: var(--brdStyle_galleryOfProse);

		border-top-width: var(--brdw_galleryOfProse);
		border-bottom-width: var(--brdh_galleryOfProse_btmOnly);
		border-right-width: var(--brdw_galleryOfProse);
		border-left-width: var(--brdw_galleryOfProse);

		padding-left: var(--padw_galleryOfProse);
		padding-right: var(--padw_galleryOfProse);

}
@media  (max-width: 645px) {
	/* mobile needs more space for the words*/
	.galleryOfProse {

		border-left: var(--brdw_galleryOfProse_mobile);
		border-right: var(--brdw_galleryOfProse_mobile);
		border-top: var(--brdw_galleryOfProse_mobile);
		border-bottom: var(--brdw_galleryOfProse_mobile);

		padding-left: var(--padw_galleryOfProse_mobile);
		padding-right: var(--padw_galleryOfProse_mobile);

		margin-left: var(--mar_galleryOfProse_mobile);
		margin-right: var(--mar_galleryOfProse_mobile);
		margin-top: var(--mar_galleryOfProse_mobile);
		margin-bottom: var(--mar_galleryOfProse_mobile);

	}
}

.galleryOfProse_frameHeading {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
	width: 396px;

	background-color: var(--backgroundColor_gallery);
	border-color: var(--brdColor_global);
	border-style: var(--brdStyle_galleryOfProse_frameHeading);
	border-width: var(--brdw_global);
	border-radius: var(--brdRadius_galleryOfProse_frameHeading);

	padding-left: var(--pad_galleryOfProse_framHeading);
	padding-right: var(--pad_galleryOfProse_framHeading);
	padding-top: var(--pad_galleryOfProse_framHeading);
	padding-bottom: var(--pad_galleryOfProse_framHeading);

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

}
@media  (max-width: 645px) {
	/* mobile needs diff padding */
	/* hardCoded width too large for mobile*/
	.galleryOfProse_frameHeading {
		width: auto;
		padding: var(pad_galleryOfProse_frameHeading_mobile);
	}
}

.galleryOfProse_frameProse {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;

	background-color: var(--backgroundColor_galleryOfProse);
	border-color: var(--brdColor_global);
	border-style: var(--brdStyle_gallery);
	border-width: var(--brdw_global);
}


.art {
    object-fit: contain;
    align-items: center;

    margin-top: var(--marTop_art_albumSong);
	margin-bottom: var(--marRest_art);
	margin-left: var(--marRest_art);
	margin-right: var(--marRest_art);
}

.song {
    object-fit: contain;
    align-items: center;

    border-color: var(--brdColor_global);
    border-width: var(--brdw_albumSong);
    border-style: var(--brdStyle_albumSong);

    margin-top: var(--marTop_art_albumSong);
	margin-bottom: var(--marRest_albumSong);
	margin-left: var(--marRest_albumSong);
	margin-right: var(--marRest_albumSong);
}

.album {
	align-self: stretch;
    border-color: var(--brdColor_global);
    border-width: var(--brdw_albumSong);
    border-style: var(--brdStyle_albumSong);

    margin-top: var(--marTop_art_albumSong);
	margin-bottom: var(--marRest_albumSong);
	margin-left: var(--marRest_albumSong);
	margin-right: var(--marRest_albumSong);
}

.innerProse {
    object-fit: contain;
    align-items: center;
	background-color: var(--backgroundColor_galleryOfProse);
	color: var(--textColor_proseParaSilver);
/*	color: var(--backgroundColor_galleryOfSong); */

    margin-top: var(--marTop_art_albumSong);
	margin-bottom: var(--marRest_art);
	margin-left: var(--marRest_art);
	margin-right: var(--marRest_art);

	margin-top: var(--mar_innerProseHeading);
	margin-bottom: var(--mar_innerProseHeading);
}


.innerProseHeading {
	background-color: var(--backgroundColor_gallery);

	margin-left: var(--mar_innerProseHeading);
	margin-right: var(--mar_innerProseHeading);
}

.innerProseHeading_pt1 {
	text-align: center;

	color: var(--textColor_essence);

	font-size: 1.5em;
	font-weight: bolder;

	margin-top: var(--mar_innerProseHeading_ptAll);
	margin-bottom: var(--mar_innerProseHeading_ptAll);
	margin-left: var(--mar_innerProseHeading_ptAll);
	margin-right: var(--mar_innerProseHeading_ptAll);
}
.innerProseHeading_pt2 {
	text-align: center;

	color: var(--textColor_innerProseHeading_pt2); 

	font-size: 1.5em;
	font-weight: bolder;
	margin-top: var(--mar_innerProseHeading_ptAll);
	margin-bottom: var(--mar_innerProseHeading_pt3top);
	margin-left: var(--mar_innerProseHeading_ptAll);
	margin-right: var(--mar_innerProseHeading_ptAll);
}
.innerProseHeading_pt3 {
	text-align: center;

	font-family: var(--font_contrast1); 
	font-size: 1.25em;

	margin-top: var(--mar_innerProseHeading_pt3top);
	margin-bottom: var(--mar_innerProseHeading_ptAll);
	margin-left: var(--mar_innerProseHeading_ptAll);
	margin-right: var(--mar_innerProseHeading_ptAll);
}

.innerProseTitle {
	text-align: center;

	color: var(--backgroundColor_global);
	color: var(--textColor_innerProseHeading_pt2);
	color: pink;

	text-shadow: 1px 1px 2px darkslategray, 
			-20px 0px 40px white, 
			0px -1px 40px white, 
			20px 0px 40px white, 
			0px 1px 40px white, 

			-25px 0px 40px goldenrod, 
			0px -2px 40px goldenrod, 
			25px 0px 40px goldenrod, 
			0px 2px 40px goldenrod, 

			-30px 0px 40px magenta, 
			0px -3px 40px magenta, 
			30px 0px 40px magenta, 
			0px 3px 40px magenta, 

			-40px 0px 50px blueviolet, 
			0px -4px 50px blueviolet, 
			40px 0px 50px blueviolet, 
			0px 4px 50px blueviolet; 

	font-size: 1.5em;
	font-weight: bolder;

	margin-top: var(--mar_innerProseHeading_ptAll);
	margin-bottom: var(--mar_innerProseHeading_ptAll);
	margin-left: var(--mar_innerProseHeading_ptAll);
	margin-right: var(--mar_innerProseHeading_ptAll);
}


.wrapArt > img {
/*	transition: all 3s ease-in-out; */
	transition-property: all;
	transition-duration: 3s;
	transition-timing-function: cubic-bezier(.91,-0.51,.24,1.56);
	filter: brightness(30%);
	transform: scale3d(.3,.3,.3);
}

.wrapArt > img:hover {
    border-color: var(--brdColor_global);
    border-width: var(--brdw_hoverWrapArt);
    border-style: var(--brdStyle_hoverWrapArt);

	filter: brightness(100%);
	transform: scale3d(1,1,1);

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

@media not all and (min-resolution:.001dpcm) {
	/* safari is a math fart */
	.wrapArt > img:hover {

		padding-left: var(--pad_hoverWrapArt_safari);
		padding-right: var(--pad_hoverWrapArt_safari);
		padding-top: var(--pad_hoverWrapArt_safari);
		padding-bottom: var(--pad_hoverWrapArt_safari);

	}
}

@media  (max-width: 645px) {
	/* mobile jumps the rails */
	.wrapArt > img:hover {

		padding-left: var(--pad_hoverWrapArt_mobile);
		padding-right: var(--pad_hoverWrapArt_mobile);
		padding-top: var(--pad_hoverWrapArt_mobile);
		padding-bottom: var(--pad_hoverWrapArt_mobile);

	}
}

.wrapSong {}		/* keep for now -- layout is happy */

/* ~~~~~~ Gallery Of Sound ~~~~~~ */

.iframeAlbum {
	border: 0;
	width: 360px; 
	height: 565px;
}

.iframeSong {
    border: 0;
    width: 280px; 
    height: 422px;
}

@media  (max-width: 645px) { 

	/* cellFriendly variation */
	.iframeSong {
		width: 170px;
		height: 312px;
    }

}