/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* END CSS RESET */


:root {
	/* GENERAL */

    --fonts: "Merriweather", serif;
	--box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;

	/* LIGHT MODE */

	--cornsilk: #FFF9D6;
	--lemon: #FCF5C7;
	--darker_yellow: #F9EA8B;
	--black_olive: #2F2C21;
	--cream: #FFFDD0;
	--flax: #FFF099;
	--gold: #F5D000;

	--text-shadow: 4px 3px 0 var(--darker_yellow);
	
	/* DARK MODE */

	--dark_green: #031911;
	--dark_shamrock: #063122;
	--medium_green: #0A4A33;
	--light_green: #0C5A3E;
	--night: #0A0A0A;

	--dark_text-shadow: 4px 4px 0 var(--dark_green);

}

body {
	background: linear-gradient(315deg, #FFFDD0, #F9EA8B);
	background-size: 200%;

	animation: background_animation 5s ease-in-out infinite;
}

@keyframes background_animation {
	0%{background-position: 10% 0%}
	50%{background-position: 91% 100%;}
	100%{background-position: 10% 0%;}
}

.content {
	background-color: var(--cream);
}

h1, h2, h3, p, ul, a {
	font-family: var(--fonts);
	line-height: 1.5;
	padding: 8px;
	color: var(--black_olive);
}

h1 {
    font-size: clamp(1rem, 2.5vw, 2rem);
	font-weight: bold;
}

h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
}

/* ======================================================================= */
/* PAGE TRANSITIONS */
/* ======================================================================= */

.no-js #page {
	opacity: 1;
}

#page {
	/* hidden by default so the incoming page doesn't flash before JS runs */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 450ms cubic-bezier(.22,1,.36,1), transform 450ms cubic-bezier(.22,1,.36,1);
	will-change: opacity, transform;
	min-height: 100vh;
}

#page.loaded {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

#page.fade-out {
	/* keep element visible while the fade-out animation runs */
	opacity: 0;
	visibility: visible;
	transform: translateY(-8px) scale(.995);
	transition-duration: 450ms;
	transition-timing-function: cubic-bezier(.22,1,.36,1);
	pointer-events: none;
}

/* ======================================================================= */
/* LANDING PAGE CSS */
/* ======================================================================= */

.banner {
	padding: 4px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-bottom: 5px solid var(--flax);
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
	background-color: var(--cornsilk);
}

.banner h1 {
	margin: auto 0;
	padding: 4px;
	text-shadow: var(--text-shadow);
}

.banner h1 .pre_icon:hover {
	text-decoration: underline;
}

.banner .ring_icon {
	display: none;
}

.banner img:hover {
	scale: 120%;
}

.thumbnail {
	background-image: url(../images/engagement_photos/AbbyHarryEngagement-037.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	filter: sepia(0.2);
	min-width: auto;
	min-height: 275px;
	text-align: center;
	
	display: flex;
	flex-direction: column;
	justify-content: center;

	border-bottom: 5px solid var(--flax);
	margin-bottom: 8px;
}

.thumbnail_anchors {
	font-size: 1.2rem;
	font-weight: 500;
	margin-top: auto;
	padding-bottom: 12px;
}

.rsvp_button {
	background-color: var(--cream);
	border-radius: 8px;
	box-shadow: var(--box-shadow);
	cursor: pointer;
	padding: 6px;
}

.rsvp_button:hover {
	background-color: var(--black_olive);
	color: var(--cornsilk);
	cursor: pointer;
}

.diamond {
	padding: 8px;
	font-size: 2rem;
	margin: auto;
	display: flex;
	justify-content: center;
	text-shadow: 3px 1px 2px var(--black_olive);
}

.blurb {
	padding-top: 4px;
	padding-left: 16px;
	padding-right: 16px;
	margin: auto;
	text-align: left;
}

.blurb p {
	padding: 0;
	padding-bottom: 8px;
	font-size: clamp(1rem, 2.5vw, 1.3rem);
}

body h2 {
	text-align: center;
}

body h2 .pre_icon {
	font-style: italic;
	font-weight: 400;
	text-shadow: 0px 0px 8px var(--gold);
	text-decoration: underline;
}

body h2 .icon {
	text-decoration: none;
	text-shadow: 0px 0px 8px var(--gold);
}

.schedule_grid_container {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	padding: 0px 16px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--flax);
	border: 8px solid var(--darker_yellow);
	border-radius: 16px;
	max-width: 350px;
	min-height: 225px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.schedule_grid_container img {
	grid-row: 1 / 3;
	margin: auto;
	/* padding: 16px; */
	border-radius: 16px;
	box-shadow: var(--box-shadow);
}

.schedule_grid_container h3 {
	margin-top: auto;
	text-align: center;
	font-size: 1.2rem;
	text-decoration: underline;
	padding-bottom: 0px;
}

.schedule_grid_container p {
	margin-bottom: auto;
	text-align: center;
	font-size: 0.9rem;
	padding-top: 0px;
	font-style: italic;
}

.questions_button {
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;

	background-color: var(--black_olive);
	color: var(--cream);
	max-width: fit-content;
	
	border-radius: 8px;
	box-shadow: var(--box-shadow);
	cursor: pointer;
	padding: 6px;
}

.bottom_links {
	margin-top: auto;
	margin-bottom: auto;
	display: grid;
	background-color: #F9EA8B;
	text-align: center;
	border-top: 4px solid var(--black_olive);
}

.bottom_links p {
	padding-bottom: 0px;
	margin-top: auto;
	font-weight: bold;
	text-align: center;
	font-size: 1.1rem;
}

.bottom_links ul {
	padding-top: 0px;
}

.bottom_links a:hover {
	font-weight: 600;
	font-style: italic;
	text-decoration: underline;
}

.bottom_links h3 {
	background-color: #2F2C21;
	color: var(--cornsilk);
}

/* PHONE MEDIA QUERIES */

@media (width < 450px) {

	.schedule_grid_container {
		margin-top: auto;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 8px;
	}

	.blurb {
		max-width: 50ch;
	}

	.sidebar {
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
		height: 100vh;
		width: 0;
		position: fixed;
		z-index: 10;
		top: 0;
		right: 0;
		background-color: var(--black_olive);
		overflow-x: hidden;
		transition: 0.5s ease-in-out;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2.5vh;
	}

	.sidebar li a {
		color: var(--cornsilk);
		font-size: 5vh;
		text-decoration: underline;
	}

	.sidebar li a:hover {
		scale: 110%;
	}

	.sidebar li a:focus {
		scale: 110%;
	}

	.openbtn {
		border: none;
		background-color: var(--cornsilk);
		z-index: 11;
		border-radius: 4px;
		transform: rotate(0);
		transition: 0.5s ease-in-out;
	}

}

/* W>PHONE */

@media (width > 648px) {
	
	.openbtn {
		display: none;
	}

	.banner_nav ul {
		display: flex;
		flex-direction: row;
		font-size: clamp(0.8rem, 2.25vw, 1.8rem);
	}

	.banner_nav li:hover {
		text-shadow: var(--text-shadow);
		text-decoration: underline;
	}

	.banner img {
		display: none;
	}

	.blurb {
		max-width: 80ch;
	}

}

/* W>TABLET */

@media (width > 1024px) {

	.content {
		max-width: 50vw;
		margin: auto;
		background-color: var(--cream);
	}

	body {
		/* background-color: var(--flax); */
		background: linear-gradient(315deg, #FFFDD0, #F9EA8B);
		background-size: 200%;

		animation: background_animation 5s ease-in-out infinite;
	}

	@keyframes background_animation {
		0%{background-position: 10% 0%}
		50%{background-position: 91% 100%;}
		100%{background-position: 10% 0%;}
	}

	.banner .ring_icon {
		display: inline;
		text-shadow: 0px 0px 8px var(--gold);
	}

	.banner .ring_icon:hover {
		text-decoration: none;
	}

}

/* WIDESCREEN WIDTH */

@media (width > 1920px) {

	.content {
		max-width: 30vw;
	}

}

/* PHOTOS PAGE CSS */

.photos_grid_container {
	/* display: grid;
	padding: 74px 16px 8px 16px;
	gap: 16px;
	grid-template-columns: 1fr; */
	opacity: 0;
	transition: opacity 0.5s ease;
	column-count: 1;
	column-gap: 16px;
	padding: 74px 16px 8px 16px;
}

.photos_grid_container.loaded {
	opacity: 1;
}

.photo_item {
	break-inside: avoid;
	margin-bottom: 16px;
}

.photo_item img {
	break-inside: avoid;
	border-radius: 8px;
	width: 100%;
	display: block;
	box-shadow: var(--box-shadow);

	animation: scroll_animation both;
	animation-timeline: view(10% 5%);
	animation-range: entry 0% cover 40%;
}

@keyframes scroll_animation {
	from {
		opacity: 0;
		scale: 0.5;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

@media (width > 1024px) {

	.photos_grid_container {
		column-count: 2;
	}

	/* .photos_grid_container img {
		max-width: 45vw;
	} */

}

/* ======================================================================= */
/* PEOPLE PAGE CSS */
/* ======================================================================= */

.people_grid_container {
	display: grid;
	padding: 74px 16px 8px 16px;
	gap: 16px;
	margin: auto;
}

.people_card {
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 8px;
	gap: 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--cream);
	border-radius: 8px;
	border: 8px solid var(--darker_yellow);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

	animation: scroll_animation both;
	animation-timeline: view(10% 5%);
	animation-range: entry 0% cover 40%;
}

.people_card img {
	grid-row: span 2;
	clip-path: circle();
	max-width: 40vw;
	margin: auto;
}

.people_card p {
	grid-column: span 2;
	margin: auto;
}

.people_card h2 {
	margin-top: auto;
	padding: 0;
}

.people_card h3 {
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	font-style: italic;
}

/* TINY DEVICE CAUTIONS */

@media (width <= 375px) {

	.people_card img {
		max-width: 30vw;
	}

}

/* HANDLING FOR TABLET */

@media (width >= 768px) {
	
	.people_grid_container {
		max-width: 80vw;
	}

	.people_card img {
		grid-row: 3/4;
		max-width: 40vw;
		margin-bottom: 8px;
	}

	.people_card p {
		grid-column: 2/3;
		grid-row: 1/5;
		margin: auto 4px;
	}

	.people_card h2 {
		grid-column: 1/2;
		margin: auto;
	}

	.people_card h3 {
		grid-column: 1/2;
		margin: auto;
	}

}

/* LAPTOP & DESKTOP */

@media (width > 1024px) {

	.people_grid_container {
		max-width: 50vw;
		padding: 80px 16px 8px 16px;
	}

	.people_grid_container img {
		max-width: 25vw;
	}

}

/* ======================================================================= */
/* RSVP PAGE CSS */
/* ======================================================================= */

.rsvp_text h1 {
	text-align: center;
	font-style: italic;
	text-shadow: var(--text-shadow);
	padding-bottom: 0px
}

.rsvp_text p {
	text-align: center;
}

.rsvp_text .rsvp_entry_confirmation {
	text-align: center;
	margin: auto;
}

.required {
	color: red;
}

.rsvp_form {
	padding: 24px;
	display: flex;
	flex-direction: column;
	/* display: grid; */
	/* grid-template-columns: 1fr; */
	font-family: var(--fonts);
	background-color: var(--darker_yellow);
	border-radius: 8px;
	max-width: 80vw;
	margin: auto;
	gap: 2px;
}

label {
	margin: auto;
	text-align: center;
	font-size: clamp(1rem, 2.5vw, 1.3rem);
	padding: 4px;
}

input {
	margin: auto;
	width: 40%;
	padding: 8px;
	border: 2px solid var(--black_olive);
	border-radius: 4px; 
	background-color: var(--lemon);
	transition: width 0.4s ease-in-out;
	font-family: var(--fonts);
}

input:hover {
	box-shadow: var(--box-shadow);
}

input:focus {
	box-shadow: var(--box-shadow);
	border-color: var(--black_olive);
	width: 50%;
}

#submit {
	background-color: var(--lemon);
	color: var(--black_olive);
	width: 30%;
	height: 48px;
	font-size: clamp(1rem, 2.5vw, 1.3rem);
	font-family: var(--fonts);
	border: 2px solid var(--black_olive);
	border-radius: 4px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 16px;
}

#submit:hover {
	box-shadow: var(--box-shadow);
	scale: 105%;
}

.rsvp_content {
	background-color: var(--cream);
	padding-bottom: 8px;
}

.rsvp_clarification {
	max-width: 80ch;
	margin: auto;
	font-style: italic;
	text-align: center;
}

/* GREATER THAN TABLET */

@media (width > 1024px) {
	.rsvp_content {
		max-width: 50vw;
		margin: auto;
	}
	
	.rsvp_bottom_links {
		margin: auto;
		max-width: 50vw;
	}

	.rsvp_form {
		display: flex;
		flex-direction: column;
		text-align: left;
		margin-left: 5vw;
		margin-right: 5vw;
		justify-content: center;
	}

	.rsvp_form input {
		width: 35%;
	}

	.rsvp_form input:focus {
		width: 40%;
	}

}

/* TALL DEVICE CAUTIONS */

@media (height > 1080px) {
	.rsvp_content {
		max-width: 60vw;
		margin: auto;
		display: flex;
		justify-content: center;
	}

	.rsvp_content h1 {
		font-size: clamp(1rem, 3.5vw, 3rem);
	}

	.rsvp_content p {
		font-size: clamp(1rem, 2.5vw, 2rem);
	}

	label {
		font-size: clamp(1rem, 2.5vw, 2rem);
	}

	input {
		padding: clamp(8px, 2.5vw, 16px);
		font-size: clamp(1rem, 2.5vw, 1.5rem);
	}
	
}

/* ======================================================================= */
/* PASSWORD PAGE CSS */
/* ======================================================================= */

.password_prompt_text {
	display: flex;
	max-width: 30ch;
	margin: auto;
	font-style: italic;
	text-shadow: var(--text-shadow);
	padding-bottom: 24px
}

.password_form {
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: var(--fonts);
	background-color: var(--darker_yellow);
	border-radius: 8px;
	max-width: 80vw;
	margin: auto;
}

.password_form label {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8px;
}

.password_form input {
	margin-left: auto;
	margin-right: auto;
}

.password_bottom_links {
	margin-top: 10vh;
}

/* GREATER THAN TABLET */

@media (width > 1024px) {

	.password_form {
		margin-left: 5vw;
		margin-right: 5vw;
	}

}

/* STICKING BOTTOM LINKS TO BOTTOM OF LARGER DEVICES */

@media (height >= 1080px) and (width <= 1024px) {

	.password_bottom_links {
		margin-top: 25vh;
	}

}

div.form-errors p{
	text-align: center;
	color: red;
}

.rsvp_entry_confirmation {
	max-width: 50ch;
}

.rsvp_entry_confirmation_precheck {
	max-width: 50ch;
	font-style: italic;
	margin: auto;
}

.rsvp_selection_region {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.rsvp_form .rsvp_selection_region p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0px;
	margin: 0;
	text-decoration: underline;
}

.rsvp_selection_region p label {
	font-weight: bolder;
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}

.rsvp_selection_region input.check {
	accent-color: var(--black_olive);
	width: 24px;
	height: 24px;
}

div.rsvp_confirmation_photo img {
	display: flex;
	border-radius: 8px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	margin-bottom: 24px;
	box-shadow: var(--box-shadow);
	max-width: 40vw;
}

div.rsvp_mult_family_select_region {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

div.rsvp_mult_family_select_region p {
	margin: auto;
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
	font-weight: bolder;
}

div.rsvp_mult_family_select_region input {
	accent-color: var(--black_olive);
	width: 24px;
	height: 24px;
}

div.rsvp_mult_family_select_region input:focus {
	width: 24px;
	height: 24px;
}

.place_link {
	text-decoration: underline;
	padding: 0;
}

.place_link:hover {
	font-weight: bold;
}

.venue_img {
	display: block;
	margin: auto;
	max-width: 35vw;
	border-radius: 10px;
	margin-bottom: 10px;
	border: 2px solid var(--black_olive);
	box-shadow: var(--box-shadow);
}

/* PHONE VENUE IMG SIZING */

@media (width < 648px) {

	.venue_img {
		max-width: 80vw;
	}

}

.travel_header {
	text-align: center;
	font-family: var(--fonts);
	line-height: 1.5;
	padding: 8px;
	color: var(--black_olive);
	font-size: clamp(1rem, 2.5vw, 1.6rem);
	font-weight: bold;
}

/* ======================================================================= */
/* DARK MODE MEDIA QUERIES */
/* ======================================================================= */

/* @media (prefers-color-scheme: dark) {

	body {
		background: linear-gradient(315deg, var(--night), var(--dark_green));
	}

	.content {
		background-color: var(--dark_shamrock);
	}

	h1, h2, h3, p, ul, a {
		color: var(--cornsilk);
	}

	.banner {
		border-bottom: 5px solid var(--night);
		background-color: var(--dark_green);
	}

	.banner h1 {
		text-shadow: var(--dark_text-shadow);
	}

} */