/* ########################################################################
This css is the styling for the footer of the primary template used in all web pages.
Author: John Halderson
Date: Dec 15 2022
##########################################################################*/



/* ########################################## */
/* Layout and styling for the "Footer" for each page. */
.footer-main {
	overflow-x: hidden;
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	/*grid-auto-rows: max-content;*//* Row height is adjusted to height of content. */
	grid-template-rows: auto 5rem auto;
	grid-template-areas: 
		"footer-content footer-content footer-content"
		". footer-menu ."
		"footer-footer footer-footer footer-footer";
	/*font-family: "Raleway"; */
	/*row-gap: 1rem;*/
	column-gap: 1rem;
	margin: 0;
	padding: 10px;
}

.footer-menu {
	grid-area: footer-menu;
	list-style-type: none;
	margin: 10px;
	font-size: 120%;
}

.footer-menu a {
	display: block;
	color: white;
	text-decoration: none;
}

.footer-menu-item a:hover {
	color: yellow;
	font-size: 120%;
}

.footer-content {
	grid-area: footer-content;
	font-size: 120%;
	margin: 10px;
}

.footer-footer {
	grid-area: footer-footer;
	/*text-align: center;*/
}

	
/*
###########################################################
## For larger screens - Desktops
## 60em = 960px
## This overrides any above settings.
########################################################### */

	@media screen and (min-width: 60em) {
		.footer-main {
			overflow-x: hidden;
			display: grid;
			grid-template-columns: 20% 1fr 1fr;
			/*grid-auto-rows: max-content;*//* Row height is adjusted to height of content. */
			grid-template-rows: auto auto auto;
			grid-template-areas: 
				"footer-menu footer-content footer-content"
				"footer-menu footer-content footer-content"
				"footer-menu footer-footer footer-footer";;
			/*font-family: "Raleway"; */
			row-gap: 1rem;
			column-gap: 1rem;
			margin: 0;
			padding: 10px;
		}
	}