/* ########################################################################
## This css is for the styling of only the content area within the home page.
## Author: John Halderson
## Date: Dec 15, 2022
##########################################################################*/
/* This is the default layout and styling for the page content. */
.site-page {
	display: grid;
	/*grid-template-columns: minmax(auto, 650px);*/
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 1rem;
	row-gap: 1rem;
	grid-template-areas: 
		"intro"
		"page_text"
		"cards";
	justify-content: center;
	width: 100%;
	/*margin: 1rem;*/
}


/*--------------------------------------------------------------
General styling
--------------------------------------------------------------*/
img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}


/*
##############################################################
## Intro: Top part of webpage content.
##############################################################
*/
.intro {
	/*height: 10vp;*/
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 100%;
	grid-template-rows: 40rem;
	grid-auto-rows: 0;	/* set height to 0 for autogenerated grid rows. */
	/*column-gap: 2rem;*/
	/*row-gap: 3rem; */
	grid-template-areas: 
		"text";
	justify-content: center;
	
}


.intro-title {
	font-size: 120%;
	color: black;
	padding: 0 1rem;
	height: auto;
	width: auto;
	text-align: center;
}


.intro-text {
	grid-area: text;
	/*background-image: url("../DT_images/S-Main-St-(1905)(1500x727).jpg");*/
	/*background-image: url("../DT_images/S-Main-St-(1905).webp");*/
	
	background-image: url("../DT_images/S_Main_(1905)(e)_1472.webp");
	/*background-image: url("../DT_images/S_Main_(1500).webp"); */
	background-position: center;
	background-repeat: no-repeat; /* Do not repeat the image. */
	background-size: cover; /* Try to fit the height of the image to the screen height and stretch the width proportionately. */
	
	
	/*background-size: contain; *//* Try to fit the width of the image to the screen width and stretch the height proportionately. */
	font-size: 160%;
	color: black;
	padding: 0 1rem;
	height: 100%;
	height: auto;
	width: auto;
}

.intro-textxxx 
{
	background-color: rgba(250, 235, 215, 0.4);
	border-radius: 6px;
}

.page_text {
	font-size: 130%;
	margin: 0;
	padding: 20px;
	color: ivory;
	grid-area: page_text;
}
/*
##############################################################
## Cards:
################################################################
*/
.cards {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 2rem;
	row-gap: 3rem;
			
	justify-content: center;
	padding: 0;
	padding: 1rem;
	font-size: 90%;
	color: black;
	margin-left: auto;
	margin-right: auto;
	width: 85%;
}


/* Default layout and styling for each card. */
/* For all devices.*/
.card {
	display: grid;
	/*grid-template-columns: minmax(auto, 650px);*/
	grid-template-columns: auto;
	grid-template-rows: auto;
	/*column-gap: 1rem;*/
	row-gap: 1rem;
	grid-template-areas: 
		"title"
		"text"
		"button";
		
	border-radius: 6px;
	padding: 0;
	font-size: 90%; 
	color: black; 
	background: ivory;
	margin: 2.5rem;
	box-shadow: 1px 1px 10px 1px grey;	
}

.cards a {
	display: block;
	text-decoration: none;
}

.card-header{
	grid-area: title;
	margin: 0;
	font-size: 220%;
	/*line-height: 1rem;*/
	text-align: center;
	margin-top: .5rem;
}

.card-text {
	grid-area: text;
	font-size: 140%;
	color: black;
	margin: .5rem;
}

.card-button {
	grid-area: button;
}

.card-item {
	border-radius: 6px;
	border: 2px solid black;
	background-position: center;
}

.card-item-imagexxx {
	border: 2px solid brown;
}

.card-item-dtstreets {
	background-image: url("../DT_images/DTstreets.webp");
}

.card-item-dtbuildings {
	background-image: url("../DT_images/DTbuildings.webp");
	background-size: cover; /* Try to fit the height of the image to the screen height and stretch the width proportionately. */
}

.card-item-old-map {
	background-image: url("../DT_images/DTownMaps.webp");
}

.card-item-dtpeople {
	background-image: url("../DT_images/DTpeople.webp");
	background-size: cover; /* Try to fit the height of the image to the screen height and stretch the width proportionately. */
}

.card-item-dtstories {
	background: ivory;
	/*background-image: url("../DT_images/DTstreets.jpg");*/
}

.card-item-dtbygone {
	background: ivory;
	/*background-image: url("../DT_images/DTstreets.jpg");*/
}


/*
.cards a:focus,
.cards a:hover {
	background: hsl(0, 0%, 97%);
}
*/

.intro-image {
	display: none;
}




@supports (grid-area: auto) {
	/* 
	##########################################################
		For medium size displays.
	#############################################################*/	
	@media screen and (min-width: 27em)  {
		
	}

	
	/* 
	#############################################################
		For large size displays - desktops.
		60em = 960px
	#############################################################
	*/	
	@media screen and (min-width: 960px) {
		
		/* Layout and styling for the "Cards" area(bottom half of page).*/		
		.cards {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
			column-gap: 3rem;
			row-gap: 3rem;
			justify-content: center;
			margin: 3rem;
			margin-left: auto;
			margin-right: auto;
		}
	}
}