/* Styles for the art grid version of the home page */
.logo {
	color: #ad4200;
	font: bold 48px Georgia, "Times New Roman", Times, serif;
}
#mainNav {
	color: #ad4200;
	font: bold 18px Georgia, "Times New Roman", Times, serif;
}
nav ul  {
	list-style-type: none; 
}
nav ul li a {
	color: #ad4200;
	text-decoration: none;
}
#mobiletotop {
	display: none;
	position: fixed;
	bottom: 2vh;
	left: 0;
	z-index:1;
	color: black;
	font: 12px Georgia, "Times New Roman", Times, serif;
	background-color: #ad420077;
	text-decoration: none;
}
body {
	position: relative;
	width: 95%;
	min-width: 300px; 
	margin: 0 auto; 
	margin-left: clamp(2px, 1vw, 40px);
	padding: 0;
}
nav  {
	float: left;
	width: 20%;
	height: 100%;
	top: 80px;
	position: fixed;
}
main {
	float: right;
	width: 80%;
	display: grid;
	grid-template-columns:  repeat(auto-fit, minmax(200px, 1fr));
	grid-column-gap: 20px;
	grid-row-gap: 0px;
	margin: auto;
}
.thumb {
	width: 200px;
	height: 200px;
}
figure {
	inline-size: fit-content;
	background-color: #ad4200;
	border: 2px  #ad4200 solid;

}
figcaption {
	contain: inline-size;
	color:white;
	background-color: #ad4200;
	text-align: center;
	padding: 0 2px 0  2px;
}
.sectionHdr {
	grid-column: 1/-1;
	background-color: #ad420077;
	padding: 0 0 0 5px;
}

@media (max-width: 400px) {
    .logo {font-size: 24px;}
	#mainNav {width: 100vw; font-size: 12px;}
	main {grid-template-columns: 1fr; width: 100%;}
	nav {position: relative; top: 0px;}
	#backtotop {display: none;}
	#mobiletotop {display: flex;}
}