/* ########################################################################
This css is the styling of the primary template used in all web pages.
Does not include styling for: navigation or main content of each webpage.
Author: John Halderson
Date: Dec 15 2022
##########################################################################*/


/*--------------------------------------------------------------
General settings.
The default intended view screen is a mobile device.
--------------------------------------------------------------*/

html, body {
	/*min-width: 40rem; */
	width: 100vw; 
    height: 100vh;
	overflow-y: auto;
	/*overflow-x: auto; */
}


.site-main {
	overflow-x: hidden;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: max-content; /* Row height is adjusted to height of content. */
	/*grid-template-rows: auto 1fr auto; */
	grid-template-areas: 
		"main-navigation"
		"main-content"
		"main-footer";
	
	font-family: "Arial", sans-serif;
	
	margin: 0;
	padding: 0;
	/*background-color: #12232e; */ /* too dark */
	/*background-color: #3e78a5; */ /* san-marino */
	/*background-color: #20c997; */ /* teal */
	/*background-color: #17a2b8; */ /* cyan */
	/*background-color: #fffff0; */ /* Ivory */
	
	/*background-color: #00303f;*/ /* Cerulean dark blueish */
	/*background-color: #12343b;*/ /* dark greenish blue  */
	/*background-color: #223845; */ /* dark dark greenish blue */
	/*background-color: #f1efe9; */ /* off white */
	/*background-color: #d9cca8; */  /* nice beige/tan */
	/*background-color: #1f4a5a; */  /* dark greenish blue */
	background-color: #2b6777;  /* dark greenish blue THIS IS NICE*/
	
}

/* Page header. */
#masthead {
	display: none;
	font-size: 2rem;
	font-weight: bold;
	color: #062F4F;  /* Ink */
	color: #2b6777;  /* dark greenish blue */
	text-align: center;
	margin: 0;
	padding: 2px;
	background-color: hsl(0, 0%, 90%);
	background-color: #d9cca8;   /* nice beige/tan */
	background-color: ivory;   
}

/* Main navigation. */
#nav-main {
	grid-area: main-navigation;
}

/* Page content. */
#myContent {
	grid-area: main-content;
}

/* Page footer. */
#colophon {
	grid-area: main-footer;
	font-size: 1rem;
	background-color: black;
	background: #222;  /* charcoalish */
	color: white;
	/*text-align: center;*/
	margin: 0;
	padding:10px;
}


.myButton {
	display: flex;
	/*display: inline-block; */
	/*text-align: center; */
	justify-content: center;  /* Centers the text in the button. Does not center the button. */
	align-items: center;
	padding: 8px 8px;
	font-size: 1rem;
	font-weight: bold;
    background: #2b6777; /* dark greenish blue */
    color: white;
    border: 1px solid #888;
	border-radius: 4px;
	/*margin-top: 1rem;*/
	margin-left: auto; 
	margin-right: auto;
	cursor: pointer;
	/*z-index: 1000; *//* This ensures that the Button is always on top. */
}

.myButton:hover {
	background: white;
	color: #2B8CBE;
}

.popupButton {
	display: flex;
	color: white;
	justify-content: center;  /* Centers the text in the button. Does not center the button. */
	align-items: center;
	padding: 7px 7px;
	font-size: 13px;
	font-weight: bold;
   	background: #2b6777;
    border: 1px solid #888;
	border-radius: 4px;
	margin-top: 2px;
	margin-left: auto; 
	margin-right: auto;
	cursor: pointer;
}

.popupButton:hover {
	color: #2b6777;
	background: white;
}


.page-title {
	text-align: center;
	color: ivory;
}

.indented-block {
	margin-left: 50px;
}

.sources{
	padding-bottom: 1px;
	margin-bottom: 10px;
	margin-left: 15px;
	font-size: smaller;
	font-style: italic;
}


/* ########################################## */
/* Styling for the "About" page. */
/* ########################################## */
.about-page{
	background-color: #fffff0; /* Ivory */
	/*border-radius: 15px;*/
	max-width: none;
	/*border: 3px solid black; */
	padding: 2rem;
}

.about-page-image-wrapper {
	display: flex;
	justify-content: center;
}

.about-page-image {
	width: 40%;
	height: auto;
}

.about-title{
	text-align: center;
}

.about-text {
	/*margin: 10px;*/
}



/* 
##########################################################
Helpful info
Five posible link states, in order;
	:link -- before you've vivited the site
	:visited -- you're viewed the site before
	:focus -- when the element is selected
	:hover -- when you hover over it
	:active -- after the link is clicked, before the next page loads (THIS IS OLD AND NOT NEEDED).
############################################################*/





@supports (grid-area: auto) { 
/* ####################################################### */
/* Tablet menu */
/* ####################################################### */
	@media all and (min-width: 700px) {
		.about-page-image-wrapper {
			display: block;
		}

		.about-page-image{
			float: left;
			min-width: 10rem;
			max-width: 15rem;
			padding-right: 10px;
			/*min-width: 15rem; */
			/*max-width: 20rem; */
			/*margin: auto; *//* Centers the image. */
		}
	}
}
	
/*
###########################################################
## For larger screens - Desktops
## 60rem = 960px
## This overrides any above settings.
########################################################### */

	@media screen and (min-width: 960px) {
		.site-main {
			display: grid;
			grid-template-columns: 100%;
			grid-auto-rows: max-content; /* Row height is adjusted to height of content. */
			/*grid-template-rows: 1fr 1fr auto auto;*/
			grid-template-areas: 
				"main-masthead"
				"main-navigation"
				"main-content"
				"main-footer";
		}
	
		#masthead {
			grid-area: main-masthead;
			display: block;
		}
		
		.about-page-image-wrapper {
			display: block;
		}
		
		.about-page-image{
			float: left;
			min-width: 10rem;
			max-width: 15rem;
			padding-right: 10px;
		}
	}