:root {
	--caption-bg-color:      #dabaea;
	--fs-xl:                 clamp(2rem, 3vw + 1rem, 3rem);
	--fs-700:                clamp(1.6rem, 1.5vw + 1rem, 2.2rem);
	--fs-600:                clamp(1.4rem, .8vw + 1rem, 1.8rem);
	--fs-500:                1.3rem;
	--fs-400:                1rem;
}

BODY {
	background-color:       #bbe;
	background-image:       url("/siteMedia/wedding/images/wedBackground.jpg");
	text-align:             center;
}

H1 {
	font-family:            Aristocrat, Georgia, 'Times New Roman', Times, serif;
	font-size:              var(--fs-xl);
	font-weight:            normal;
	margin-bottom:          1em;
	text-align:             center;
}	

H2 {
	font-family:            'Times New Roman', Times, serif;
	font-size:              var(--fs-700);
	font-weight:            bold;
	margin:                 2rem auto;
	text-align:             center;
}

H3 {
	font-family:            'Times New Roman', Times, serif;
	font-size:              var(--fs-600);
	font-weight:            bold;
	margin:                 2rem auto;
	text-align:             center;
}

FIGURE {
	display:                inline-block;
	border:                 4px pink ridge;
	margin:                 1em auto;
	padding:                5px;
	background-color:       #d092ef;
	text-align:             center;
	min-width:              150px;
}
FIGURE > DIV {
	background-color:       var(--caption-bg-color);
}
FIGURE IMG {
	display:                block;
	margin:                 auto;
	max-height:             100px;
	max-width:              150px;
}

FIGCAPTION {
	font-family:            'Times New Roman', Times, serif;
	font-size:              var(--fs-400);
	background-color:       var(--caption-bg-color);
	margin:0;
	padding:0;
}

P {
	font-family:            'Rochester Regular';
	font-size:              var(--fs-500);
	text-indent:            3ch;
	text-align:             justify;
}

#storybook_container {
	container:              storybook / inline-size;
}
#storybook {
	display:                grid;
	column-gap:             4rem;
	max-width:              min(70vw, 1200px);
	margin:                 auto;
	padding:                1rem 5rem 10cqh 6rem;
}
#storybook:hover P {
	font-family:            'Times New Roman', Times, serif;
}
/*
	Applies if the width is greater than the width of both columns,
	plus the column gap, plus the external margins (roughly the
	inverse of storybook's max-width).
*/
@container storybook (inline-size >= calc(80ch + 4rem + max(25vw, 250px))) {
	#storybook {
		grid-template-columns:  repeat(2, 1fr);
		background-image:       url("/siteMedia/wedding/images/book.gif");
		background-size:        100% 100%;
	}
}
/* Else (inverse of the above query). */
@container storybook (inline-size < calc(80ch + 4rem + max(25vw, 250px))) {
	#storybook {
		filter:                 drop-shadow(3px 3px 10px #3c3434);
		box-shadow:             0 0 1000px #c2bcbc inset;
		border-radius:          3px;
		background-color:       #e1dcdc;
	}
}

DIV.photo_container {
	display:                flex;
	flex-wrap:              wrap;
	gap:                    3rem 1rem;
	justify-content:        center;
	margin:                 auto auto 4rem auto;
	width:                  clamp(250px, 90vw, 1500px);
}
DIV.photo_container > DIV {
	flex:                   0 1 200px;
	display:                inline-block;
}
DIV.photo_container BLOCKQUOTE {
	display:                block;
	margin:                 0;
	font-size:              var(--fs-400);
	text-align:             center;
}

.h_bar {
	margin:                 2rem auto;
}


/* Adjust for wide, short screens (like phone in landscape). */
@media (max-device-height: 700px) {
	#storybook {
		padding-bottom:          8rem;
	}
}

/* Adjust for tall, narrow screens. */
@media (max-aspect-ratio: 1200 / 1920) and (max-device-width: 1080px) {
	:root {
		--fs-xl:                 clamp(3.7rem, 5.5vw + 1rem, 5.5rem);
		--fs-700:                clamp(2.3rem, 2.6vw + 1rem, 3rem);
		--fs-600:                clamp(1.8rem, 1.6vw + 1rem, 2.2rem);
		--fs-500:                2rem;
		--fs-400:                1.7rem;
	}

	DIV.photo_container {
		gap:                    5rem 2rem;
	}

	FIGURE IMG {
		max-height:              200px;
		max-width:               300px;
	}
}