:root
{
	--color_background : #fbf2f2;
	--color_text : #101010;
	--color_light_blue : #74C1FF;
	--color_dark_blue : #2893FF;
	--color_main_menu_item_background_hover : #c7f0ff;
}

@font-face {
	font-family : "EBGaramond";
	src : url("/fonts/EBGaramond-VariableFont_wght.ttf");
}

body {
	background-color : var(--color_background);
 	font-family : 'EBGaramond', Serif;
 	text-align : center;
	color : var(--color_text);
	padding : 0px;
	margin : 0px;
}

.page_body
{
	background-color : var(--color_background);
	text-align : left;
	margin-bottom : 30px;

	margin-left : auto;
	margin-right : auto;
	font-size : 1.3em;
}
@media screen and (min-width: 1px)
{
	.page_body { width : 90vw; }
}
@media screen and (min-width: 750px)
{
	.page_body { width : 700px; }
}

h3
{
	margin-bottom : 5px;
	margin-top : 15px;
}

a
{
	color : var(--color_dark_blue);
	text-decoration : underline;
}

a:hover
{
	color : var(--color_light_blue);
}

a.a_logo:hover
{
	padding : 0px;
	margin : 0px;
	background-color : transparent;
	border-color : transparent;
}

.main_menu_item
{
	margin: 5px;
	padding : 5px 10px 5px 10px;
	background-color : #FFFFFF;
	border-radius : 5px;
	border-width : 2px;
	border-style : solid;
	border-color : var(--color_dark_blue);
}
a.main_menu_item
{
	color : var(--color_dark_blue);
	text-decoration : none;
	font-size : 1.3em;
}

a.main_menu_item:hover
{
	color : var(--color_dark_blue);
	background-color : var(--color_main_menu_item_background_hover);
	margin: 5px;
	padding : 5px 10px 5px 10px;
	border-radius : 5px;
	border-style : solid;
	border-color : var(--color_dark_blue);
}

.main_menu_item_contact
{
	margin: 5px;
	padding : 5px 10px 5px 10px;
	background-color : var(--color_dark_blue);
	border-radius : 5px;
	border-width : 2px;
	border-style : solid;
	border-color : var(--color_dark_blue);
}
a.main_menu_item_contact
{
	color : #FFFFFF;
	text-decoration : none;
	font-size : 1.3em;
}
a.main_menu_item_contact:hover
{
	color : var(--color_dark_blue);
	background-color : var(--color_main_menu_item_background_hover);
	margin: 5px;
	padding : 5px 10px 5px 10px;
	border-radius : 5px;
	border-style : solid;
	border-color : var(--color_dark_blue);
}

h2 {
	line-height : 1.7em;
}

@media screen and (min-width: 1px)
{
	.main_photo { width : 100vw; }
}
@media screen and (min-width: 1300px)
{
	.main_photo { width : 1300px; }
}

.main_menu_row_div
{
 	margin-top: 20px;
 	margin-left: auto;
 	margin-right: auto;
	display : flex;
	flex-wrap : wrap;
	align-content : center;
	flex-direction : row;
	justify-content : center;
	align-items : center;
}

.main_menu_flex_subdiv
{
 	margin: 10px;
	display : flex;
	flex-wrap : wrap;
	align-content : center;
	flex-direction : row;
	justify-content : center;
	align-items : center;
}

.blurry_tones_logo
{
	width : 160px;
	height : 160px;
	margin : 10px 10px 0px 10px;
}

.a_logo
{
	padding : 0px;
	margin : 0px;
	background-color : transparent;
	border-color : transparent;
}

.main_photo
{
	z-index : -1;
	position : relative;
	left : 0px;
	height : auto;
}
@media screen and (min-width: 1px)
{
	.main_photo { top : -35px; }
}
@media screen and (min-width: 738px)
{
	.main_photo { top : -50px; }
}

.band_member_photo_flex_div
{
 	margin : 10px;
	display : flex;
	flex-wrap : wrap;
	align-content : center;
	flex-direction : row;
	justify-content : center;
	align-items : center;
}

.band_member_photo_div
{
	text-align : center;
	margin : 10px;
}

.band_member_photo
{
	border-radius : 50%;
	height : 200px;
	width : 200px; /* @TODO: change to auto with final pix */
}

.downloads_grid
{
	display : grid;
	gap : 10px;
	grid-auto-columns: auto;
	grid-auto-flow: row dense;
	grid-auto-rows: auto;
	grid-template-rows: auto;
}
@media screen and (min-width: 1px)
{
	.downloads_grid { grid-template-columns : 90vw; }
}
@media screen and (min-width: 750px)
{
	.downloads_grid { grid-template-columns : 20vw 20vw 20vw; }
}

.download_item
{
	text-align : center;
	padding : 10px;
}
.gallery_page_body
{
	width : 90vw;
	background-color : var(--color_background);
	text-align : left;
	margin-bottom : 30px;

	margin-left : auto;
	margin-right : auto;
	font-size : 1.3em;
}

.gallery_grid
{
	display : grid;
	gap : 10px;
	grid-auto-columns: auto;
	grid-auto-flow: row dense;
	grid-auto-rows: auto;
	grid-template-rows: auto;
}
@media screen and (min-width: 1px)
{
	.gallery_grid { grid-template-columns : 90vw; }

	.gallery_photo
	{
		width: 90vw;
		height: auto;
	}

	video
	{
		width : 90vw;
		height : auto;
	}
}
@media screen and (min-width: 750px)
{
	.gallery_grid { grid-template-columns : 45vw 45vw; }

	.gallery_photo
	{
		width: 45vw;
		height: auto;
	}
	video
	{
		width : 45vw;
		height : auto;
	}
}

.gallery_menu_flex_div
{
 	margin: 0px 0px 20px 0px;
	display : flex;
	flex-wrap : wrap;
	align-content : center;
	flex-direction : row;
	justify-content : flex-start;
	align-items : center;
}

.gallery_menu_item
{
	margin: 5px;
	padding : 5px 10px 5px 10px;
	background-color : #FFFFFF;
	border-radius : 5px;
	border-width : 2px;
	border-style : solid;
	border-color : var(--color_dark_blue);
}
a.gallery_menu_item
{
	color : var(--color_dark_blue);
	text-decoration : none;
	font-size : 1em;
}

a.gallery_menu_item:hover
{
	color : #FFFFFF;
	background-color : var(--color_dark_blue);
	margin: 5px;
	padding : 5px 10px 5px 10px;
	border-radius : 5px;
	border-style : solid;
	border-color : var(--color_dark_blue);
}

@media screen and (min-width: 1px)
{
	.contact_google_form_iframe
	{
		width : 350px;
		height : 850px;
		padding-top : 20px;
	}
}
@media screen and (min-width: 500px)
{
	.contact_google_form_iframe
	{
		width : 480px;
		height : 800px;
		padding-top : 20px;
	}
}
@media screen and (min-width: 750px)
{
	.contact_google_form_iframe
	{
		width : 700px;
		height : 800px;
		padding-top : 20px;
	}
}

.footer
{
	font-size : 0.9em;
	padding : 10px 0px 20px 0px;
}