dl.grid { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dd { 
  margin: 0; 
  padding-left: 1em
}
dl.grid dd {
  margin-bottom: 1em;
}

a[href^="tel"] { white-space: nowrap; }

body {
	font-family: Georgia, serif;
	background-color: #cdd3c5;
	background: #cdd3c5 url(DSC_01_0104.JPG) no-repeat right fixed;
	background-size: cover;
	background-blend-mode: screen;
	/*background-repeat: no-repeat; */
}
main {
	margin-left: 170px;
	padding: 10px 10px; 
}
h1 {
	padding-left: 10px;
	color: #272c21;
}
footer {
	
	margin: 170px;
}
#bio {
	text-align: justify; 
	text-decoration: strong; 
	/*text-shadow: 1px 1px 2px #000000;*/
	line-height: 2; 
	font-size: 150%;
	font-weight: bold; 
	
}
footer {
font-size: 85%; 
}

.navbar {
	height: 100%;
	width: 170px;
	position: fixed; 
	z-index: 1;
	top: 0; 
	left: 0; 
	background-color: #8A9977; 
	overflow-x:hidden; 
	padding-top: 20px; 
}
.navbar a {
	padding: 6px 8px 6px 16px; 
	text-decoration: none; 
	font-size: 25px; 
	color: #414937;
	display: block;
}
.navbar a:hover{
	color:#d9ded3;
}
ul{
	list-style-type:none; 
	margin: 0; 
	padding: 0;
}
@media screen and (max-height:450px){
	.navbar{padding-top:15px;}
	.navbar a {font-size: 18px;}
}
.gallery {
  --size:10em ; /* control the size */
  --gap: 1em;  /* control the gap */
  --zoom: 2;  /* control the scale factor */
   
  display: grid;
  gap: var(--gap);
  width: calc(7*var(--size) + 2*var(--gap));
  aspect-ratio: 1; /*flexible elements for resizing - play with later for diff devices*/
  grid-template-columns: repeat(3,auto); 
}
.gallery figure {
  margin: 0;
  padding: 0;
  position: relative;
}

.gallery figcaption {
	position: absolute;
  	bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
  	opacity: 0;
	color: white;
	background: rgba(0, 0, 0, 0.3);	
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
  opacity: 1;
}

.gallery > figure img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(80%);
  transition: .35s linear;
}

.gallery figure:hover img,
.gallery figure:focus img{
  filter: grayscale(0);
  width:  calc(var(--size)*var(--zoom));
  height: calc(var(--size)*var(--zoom));
}