body {
	background: #96b7d6 url(art/cloud_bg.jpg);
}

a {
	color: #4a6c8b;
}

a:visited {
	color: #96b7d6;
}

#wrapper {
	background: #fff;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	margin-bottom: 80px;
	padding: 20px 30px 10px 30px;
		-moz-box-shadow: 0px 2px 6px rgba(0,0,0,.4);
	-webkit-box-shadow: 0px 2px 6px rgba(0,0,0,.4);

}

#poster {
	width: 180px;
	float: right;
}


#main {
	width: 380px;
	}

p {
	text-align: left;
	font-family: john-doe, Georgia, serif;
	font-size: 13px;
	line-height: 19px;
}

li {
	text-align: left;
	font-family: john-doe, Georgia, serif;
	font-size: 13px;
	line-height: 19px;
}


h1 {
	text-align: left;
	font-family: john-doe, Georgia, serif;
	font-weight: 700; 
	font-size: 21px;
}

h3 {
	text-align: left;
	font-family: john-doe, Georgia, serif;
	font-weight: 700; 
	font-size: 16px;
}


.mp3 {
	font-family: Helvetica;
	font-weight: bold;
	font-size: 11px;
	text-decoration: none;
	
}


/* 
=================================================
 Photo Gallery - Page Layout
=================================================
 */
	 
/* I also got help from the robots for this 
photo gallery. I knew what I wanted it to 
do but it would have taken a while to figure out 
the math on my own */
	 
	 
.photo-container {
	 width: 84%;            
	 max-width: 1200px;
	 margin-top: 80px;
	 margin-bottom: 50px;
	 margin-left: auto;
	 margin-right: auto;
 }
 
 .photo-gallery {
	 display: flex;
	 flex-wrap: wrap;

	 /* Keeps row alignment tight */
	 align-items: flex-start; 
	 gap: 16px;
	 width: 100%;
	 margin-bottom: 35px;

 }
 
 .photo-item {
  
/* This distributes the row width proportionally 
based on the aspect ratio of the photos...?
Not sure quite how the math works, but it works  */

	 flex-grow: calc(var(--w) / var(--h));
	 
/* Target height baseline hint for mobile */
flex-basis: calc(var(--w) / var(--h) * 300px);

/* CRITICAL SAFETY CAP: Prevents wide/panoramic photos from overflowing mobile screens */
	 max-width: 100%;

	 
	 min-width: 0;
	 border-radius: 12px;
	 overflow: hidden;
	 box-shadow: 0px 2px 4px #0007;

	 /* Allows absolute positioning of the overlay relative to this box */
	  position: relative;

 }
 
  
 .photo-item img {
   
 /* This shows the full image without cropping */   
	 width: 100%;
	 height: auto;         
 }
 
 
 .photo-item .caption {
	  position: absolute;
	  width: 100%;

	  /* Inset 12px on each side so it sits neatly inside the photo border */
	  bottom: 0px;
	  
	  background: rgba(0, 0, 0, 0.5);
	  color: #fff;
	  padding: 8px 16px;
	  font-size: 12px;
	  font-family: john-doe, Georgia, serif;
	  line-height: 1.4;
	  box-sizing: border-box;
	  
	  pointer-events: none; /* Allows clicks to pass through to the photo */
  }
 
 
 
 /* This absorbs the leftover space on the last row 
 so that trailing photos don't grow to crazy heights */
 .photo-gallery::after {
	 content: "";
	 flex-grow: 999999;
 }
 
video {
	 display: block;
	 max-width: 100%;
 }
 
 /* Styling for inline video embeds */
 
 video {
	 width: 100%;
	 height: auto;
	 
	 /* Rounded corners */
	 border-radius: 8px; 
 }