/*** page ***/
	:root {
		--dark-gray: #111111;
		--medium-gray: #333333;
		--light-gray: #dddddd;
		--light-brown: #ccaa77;
		--medium-yellow: #fcba03;
		--dark-yellow: #bf9521;
		--light-green: #77bb55;
		--green-gradient: linear-gradient(152.103deg, #5abf5b 9.3%, #0c732b 88.3%);
		--teal-gradient: linear-gradient(0deg, #10768d 0%, #189da4 100%);
		--blue-gradient: linear-gradient(180deg, #a2c9dd 0%, #04b1ff 100%);
		--gray-gradient: linear-gradient(180deg, #777777 0%, #333333 100%);
		--red-gradient: linear-gradient(180deg, #e24b4b 0%, #8a2424 100%);
		--translucent-gray: #11111188;
		--dark-teal: #0b6c75;
		--light-teal: #33aaaa;
		--light-blue: #04b1ff;
		--gap-size: 5px;
		--shadow-size: 5px;
		--border-size: 2px;
		--border-radius: 5px;
		--main-font-family: "Roboto Condensed", sans-serif;
		--header-font-family: "Zen Loop", sans-serif;
		--font-size: 20px;
		--line-height: 1.2;
		--transition-time: 0.5s;
		--navigation-height: 60px;
		--section-height: calc(100vh - 6 * var(--navigation-height));
		--content-width: 800px;
		--gutter-size: 40px;
		--map-size: 500px;
	}

	html, body {
		margin: 0;
		padding: 0;
		font-size: 0;
		font-family: var(--main-font-family);
		text-align: center;
		scroll-behavior: smooth;
	}

		html {
			background: var(--medium-gray);
		}

		body {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			min-height: 100vh;
			height: auto;
			background: var(--teal-gradient);
			overflow-x: hidden;
		}

		svg {
			fill: currentColor;
			height: 100%;
			width: auto;
			vertical-align: top;
		}

		h1 {
			position: relative;
			top: calc(50vh - var(--navigation-height) / 2);
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: 100%;
			font-size: calc(var(--font-size) * 2);
			font-family: var(--header-font-family);
			font-weight: bold;
			color: var(--light-gray);
			user-select: none;
			margin: 0;
			text-align: center;
			line-height: var(--line-height);
		}

		h2 {
			text-align: center;
			font-size: calc(var(--font-size) * 2);
			font-family: var(--header-font-family);
			font-weight: bold;
			margin: 0;
			padding: calc(2 * var(--gap-size)) 0;
			width: 100%;
			box-sizing: border-box;
			user-select: none;
			background-image: url("flower.png");
			background-size: contain;
			background-repeat: repeat-x;
			background-position: center;
			border: var(--border-size) solid var(--light-gray);
			border-top: none;
			border-bottom: none;
			line-height: var(--line-height);
		}

		h3 {
			font-family: var(--header-font-family);
			text-align: center;
			font-size: calc(var(--font-size) * 2);
			font-style: italic;
			font-weight: normal;
			color: var(--light-gray);
			user-select: none;
			margin: 0;
			padding: 0;
			width: auto;
			box-sizing: border-box;
			line-height: var(--line-height);
			vertical-align: middle;
		}

		h4 {
			font-size: calc(var(--font-size) * 1.5);
			font-weight: normal;
			font-family: var(--header-font-family);
			text-align: center;
			color: var(--light-gray);
			user-select: none;
			line-height: var(--line-height);
			box-sizing: border-box;
			padding: 0 var(--gap-size) 0 var(--gap-size);
			margin: 0;
		}

		label {
			display: block;
			width: 100%;
		}

		input, select, textarea {
			background: var(--light-gray);
			border-radius: var(--border-radius);
			padding: 0 var(--gap-size);
			color: var(--dark-gray);
			outline: none;
			margin: var(--gap-size);
			display: inline-block;
			font-size: var(--font-size);
			height: calc(var(--font-size) + 2 * var(--gap-size) + 2 * var(--border-size));
			width: calc(var(--font-size) * 5);
			font-family: var(--main-font-family);
			line-height: 1;
			transition: box-shadow var(--transition-time);
			border: var(--border-size) solid var(--medium-gray);
			vertical-align: middle;
			box-sizing: border-box;
		}

			select {
				cursor: pointer;
			}

			textarea {
				padding: var(--gap-size);
				min-height: calc(var(--font-size) + 2 * var(--gap-size) + 2 * var(--border-size));
			}

			input:focus, select:focus, textarea:focus {
				box-shadow: 0 0 var(--border-size) var(--border-size) var(--medium-gray);
			}

			input[disabled] {
				background: var(--transparent);
				color: var(--light-gray);
				border-color: transparent;
				user-select: none;
			}

		button {
			background: var(--light-gray);
			color: var(--medium-gray);
			font-weight: bold;
			border: var(--border-size) solid var(--light-gray);
			outline: none;
			cursor: pointer;
			border-radius: var(--border-radius);
			padding: var(--gap-size);
			margin: var(--gap-size);
			height: calc(var(--font-size) + 2 * var(--gap-size) + 2 * var(--border-size));
			min-width: calc(var(--font-size) + 2 * var(--gap-size) + 2 * var(--border-size));
			transition: var(--transition-time);
			font-size: var(--font-size);
			font-family: var(--main-font-family);
			line-height: 1;
			vertical-align: top;
			user-select: none;
		}

			button:hover, button:focus {
				box-shadow: 0 0 var(--border-size) var(--border-size) var(--light-gray);
			}

		p {
			text-align: center;
			font-size: var(--font-size);
			font-family: var(--main-font-family);
			line-height: var(--line-height);
			margin: var(--font-size) 0;
			color: var(--light-gray);
			width: 100%;
			box-sizing: border-box;
			padding: 0 var(--gap-size);
		}

		li {
			color: var(--light-gray);
			text-align: left;
			font-size: var(--font-size);
			font-family: var(--main-font-family);
			line-height: var(--line-height);
			width: 100%;
			box-sizing: border-box;
			padding: 0 0 0 var(--gap-size);
		}

			p + ol, p + ul {
				margin-top: calc(-1 * var(--font-size));
			}

		a, a:visited {
			color: var(--medium-yellow);
			text-decoration: none;
			font-weight: bold;
			outline: none;
			cursor: pointer;
			transition: var(--transition-time);
		}

		a:hover, a:focus {
			color: var(--dark-yellow);
		}

		hr {
			border: calc(var(--border-size) / 2) solid var(--light-gray);
			margin: calc(2 * var(--font-size)) 0;
			width: 50%;
			margin-left: auto;
			margin-right: auto;
			box-sizing: border-box;
		}

		details {
			width: 100%;
			outline: none;
			height: auto;
			border: var(--border-size) solid var(--light-gray);
			border-radius: calc(2 * var(--border-radius));
			padding: var(--gap-size);
			box-sizing: border-box;
			margin: var(--font-size) 0;
		}

			details summary {
				font-size: calc(var(--font-size) * 2);
				font-family: var(--main-font-family);
				user-select: none;
				outline: none;
				cursor: pointer;
				transition: var(--transition-time);
				color: var(--light-gray);
				margin: 0;
				line-height: 1;
				vertical-align: middle;
				height: calc(2 * var(--gap-size) + var(--font-size) * 1.5);
				padding: 0 var(--gap-size);
				text-align: left;
				box-sizing: border-box;
			}

				details summary:hover, details summary:focus {
					color: var(--dark-yellow);
				}

/*** l-logo & j-logo ***/
	#l-logo {
		position: fixed;
		top: 14px;
		left: 14px;
		height: 32px;
		width: 32px;
		background-image: url(liz_logo.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 1000;
		outline: none;
		transition: var(--transition-time);
		filter: saturate(0%) brightness(150%);
	}

		#l-logo:hover, #l-logo:focus {
			filter: saturate(100%);
		}

	#j-logo {
		position: fixed;
		top: 14px;
		right: 7px;
		height: 32px;
		width: 32px;
		color: var(--light-gray);
		cursor: pointer;
		z-index: 1000;
		outline: none;
		transition: var(--transition-time);
	}

		#j-logo svg {
			fill: currentColor;
			height: 100%;
			width: auto;
		}

		#j-logo:hover, #j-logo:focus {
			color: var(--light-blue);
		}

	@media screen and (max-width: 800px) {
		#l-logo, #j-logo {
			display: none;
		}
	}

/*** navigation ***/
	#navigation {
		float: left;
		position: sticky;
		top: 0px;
		left: 0px;
		height: var(--navigation-height);
		width: 100%;
		background: var(--medium-gray);
		text-align: center;
		padding: calc(var(--gap-size)) 0;
		box-sizing: border-box;
		z-index: 100;
		overflow: hidden;
	}

		#navigation a, #navigation a:visited {
			display: inline-block;
			box-sizing: border-box;
			height: calc(var(--navigation-height) - 2 * var(--gap-size));
			padding: calc(var(--gap-size) * 2);
			line-height: 1;
			color: var(--light-gray);
			font-size: calc(1.5 * var(--font-size));
			font-family: var(--header-font-family);
			vertical-align: middle;
		}

			#navigation a:hover, #navigation a:focus {
				color: var(--light-teal);
			}

/*** content ***/
	#content {
		float: left;
		width: 100vw;
		height: auto;
		min-height: calc(100vh - var(--navigation-height));
		padding: 0 0 var(--navigation-height) 0;
		box-sizing: border-box;
	}

		section {
			width: 100%;
			padding: var(--navigation-height) 0 var(--navigation-height) 0;
			box-sizing: border-box;
		}

			section h2 a, section h2 a:visited {
				display: inline-block;
				text-align: center;
				width: calc(var(--font-size) * 8);
				height: 100%;
				padding: 0;
				color: var(--light-gray) !important;
				line-height: var(--line-height);
				background: var(--medium-gray);
				border-radius: calc(2 * var(--border-radius));
				border: var(--border-size) solid var(--light-gray);
				outline: none;
				cursor: pointer;
			}

				section h2 a:hover, section h2 a:focus {
					color: var(--light-teal) !important;
				}

			section .section-inner {
				margin: 0 auto;
				max-width: var(--content-width);
				width: 100%;
				height: 100%;
				min-height: var(--section-height);
				box-sizing: border-box;
				padding: 0 var(--gap-size);
				border-radius: var(--border-radius);
			}

			section .subsection {
				width: 100%;
				margin: var(--font-size) 0;
				border: var(--border-size) solid var(--light-gray);
				box-sizing: border-box;
				border-radius: calc(2 * var(--border-radius));
				overflow: hidden;
			}

/*** splash ***/
	#splash {
		float: left;
		width: 100%;
		height: auto;
		min-height: calc(100vh - 3 / 2 * var(--navigation-height));
		margin-top: calc(var(--navigation-height) / 2);
		overflow: hidden;
		padding: 0;
	}

		#splash h1 div:nth-child(2) {
			font-size: calc(var(--font-size) * 5);
		}

		#splash-arrow, #splash-arrow:visited {
			display: inline-block;
			width: calc(var(--font-size) * 3);
			height: calc(var(--font-size) * 3);
			color: var(--light-gray);
			cursor: pointer;
			transition: var(--transition-time);
			outline: none;
			user-select: none;
			animation: colorloop infinite linear 2s;
		}

			#splash-arrow:hover, #splash-arrow:focus {
				color: var(--dark-yellow) !important;
			}

			@keyframes colorloop {
				0% {
					color: var(--light-gray);
				}

				50% {
					color: var(--medium-yellow);
				}

				100% {
					color: var(--light-gray);
				}
			}

/*** overview ***/
	#overview h3 {
		text-shadow: 0 0 var(--shadow-size) var(--light-gray);
	}

	#overview p {
		color: var(--medium-gray);
	}

/*** event ***/
	#event {
		margin-top: var(--navigation-height);
	}

		#event-schedule {
			margin-top: calc(var(--font-size) * 2);
		}

			#event h4 {
				margin-top: var(--font-size);
			}

/*** rsvp ***/
	#rsvp p {
		margin: 0 0 calc(2 * var(--gap-size)) 0;
	}

	#rsvp-gate {
		padding: calc(2 * var(--font-size)) 0 var(--font-size) 0;
		width: 100%;
		text-align: center;
	}

		#rsvp-gate-text[hidden] {
			display: none;
		}

		#rsvp-gate-code {
			width: calc(var(--font-size) * 12);
			margin-right: 0;
		}

		#rsvp-gate-enter[checking] {
			pointer-events: none;
		}

		#rsvp-gate-enter[checking] span:first-child {
			display: none;
		}

		#rsvp-gate-enter[checking] svg {
			animation: spin linear 1s infinite;
		}

		#rsvp-gate-enter:not([checking]) span:nth-child(2) {
			display: none;
		}

	#rsvp-info:not([login]) {
		display: none;
	}

		#rsvp-info h3 {
			margin: calc(2 * var(--gap-size)) 0 var(--gap-size) 0;
		}

			.rsvp-info-party-member {
				padding: var(--gap-size) 0 0 0;
				margin-bottom: calc(2 * var(--gap-size));
				background: rgba(0,0,0,0.3);
			}

				.rsvp-info-party-member-name {
					margin-top: 0;
					margin-left: 0;
					width: calc(var(--font-size) * 15);
					text-align: center;
				}

				.rsvp-info-party-member-sentence {
					display: inline-block;
				}

				.rsvp-info-party-member-adverb {
					border-radius: var(--border-radius) 0 0 var(--border-radius);
					border-right: none;
					margin-right: 0;
					margin-left: 0;
					margin-top: 0;
					width: calc(var(--font-size) * 9);
					background: var(--blue-gradient);
				}

				.rsvp-info-party-member-verb {
					margin-top: 0;
					border-radius: 0 var(--border-radius) var(--border-radius) 0;
					margin-left: 0;
					width: calc(var(--font-size) * 6);
					color: var(--light-gray);
					background: var(--gray-gradient);
				}

					.rsvp-info-party-member-verb[verb="accepts"] {
						background: var(--green-gradient);
					}

					.rsvp-info-party-member-verb[verb="declines"] {
						background: var(--red-gradient);
					}

		#rsvp-info textarea {
			margin-top: 0;
			min-height: calc(var(--font-size) * 2 + var(--gap-size) * 2 + var(--border-size) * 2);
			max-height: calc(100vh - var(--navigation-height) - 3 * var(--font-size));
			min-width: calc(100% - 2 * var(--gap-size));
			max-width: calc(100% - 2 * var(--gap-size));
		}

	#rsvp-info-save, #rsvp-info-save-2 {
		height: calc(var(--font-size) * 2 + var(--gap-size) * 2 + var(--border-size) * 2);
		font-size: calc(var(--font-size) * 2);
		margin-top: var(--font-size);
		margin-bottom: var(--font-size);
		display: inline-block;
		text-transform: uppercase;
	}

		#rsvp-info-save[saving] svg, #rsvp-info-save-2[saving] svg {
			animation: spin linear 1s infinite;
		}

		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			50% {
				transform: rotate(180deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		#rsvp-info-save[saved] span:first-child, #rsvp-info-save[saving] span:first-child,
		#rsvp-info-save-2[saved] span:first-child, #rsvp-info-save-2[saving] span:first-child {
			display: none;
		}

		#rsvp-info-save:not([saving]) span:nth-child(2),
		#rsvp-info-save-2:not([saving]) span:nth-child(2) {
			display: none;
		}

		#rsvp-info-save:not([saved]) span:last-child,
		#rsvp-info-save-2:not([saved]) span:last-child {
			display: none;
		}

/*** travel ***/
	#travel-places svg {
		height: calc(2 * var(--font-size));
		color: var(--light-gray);
		margin: var(--font-size) 0 0 0;
	}

	#travel-places h3, #travel-places h4 {
		user-select: auto;
	}

	#travel-map {
		padding: calc(var(--navigation-height) + var(--gap-size)) 0 0 0;
	}

	#travel-map-inner {
		border: var(--border-size) solid var(--light-gray);
		border-radius: calc(2 * var(--border-radius));
		box-sizing: border-box;
		width: 100%;
		height: calc(100vh - 4 * var(--gap-size) - var(--navigation-height));
		max-height: 80vh;
		overflow: hidden;
	}

/*** us ***/
	#us-story {
		padding-top: calc(var(--font-size) * 2 + var(--gap-size));
		font-family: var(--main-font-family);
		color: var(--light-gray);
		font-size: var(--font-size);
	}

		#us-story p {
			font-family: inherit;
			color: inherit;
			font-size: inherit;
			text-align: inherit;
		}

		#us-story[story="noir"], #us-story[story="telegraph"] {
			font-family: "Courier Prime", monospace;
			font-size: calc(var(--font-size) * 1);
			text-align: left;
		}

		#us-story[story="sonnet"] {
			font-family: "Tangerine", cursive;
			font-size: calc(var(--font-size) * 3 / 2);
			line-height: 1.5;
		}

		#us-story[story="scifi"] {
			text-align: left;
			font-family: "Orbitron", monospace;
			font-size: calc(var(--font-size) * 1);
		}

		#us-story[story="trailer"] {
			text-align: center;
			font-family: "Bangers", sans-serif;
			font-size: calc(var(--font-size) * 1.5);
		}

	#us-random svg {
		margin-left: var(--gap-size);
	}

	#us-gallery {
		width: 100%;
		height: 75vh;
		max-height: calc(100vw - 2 * var(--gap-size));
		box-sizing: border-box;
		background-color: var(--dark-gray);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: var(--border-radius);
		overflow: hidden;
		border: var(--border-size) solid var(--light-gray);
		margin-top: var(--font-size);
	}

		#us-gallery-left, #us-gallery-right {
			z-index: 10;
			background: transparent;
			color: var(--light-gray);
			border: none;
			outline: none;
			cursor: pointer;
			border-radius: 100%;
			padding: 0;
			margin: 0;
			height: 100%;
			width: calc(3 * var(--font-size));
			transition: var(--transition-time);
			filter: drop-shadow(0 0 var(--shadow-size) var(--dark-gray));
		}

			#us-gallery-left {
				float: left;
			}

			#us-gallery-right {
				float: right;
			}

			#us-gallery-left:hover, #us-gallery-left:focus, #us-gallery-right:hover, #us-gallery-right:focus {
				color: var(--light-teal);
				box-shadow: none !important;
			}

			#us-gallery-left svg, #us-gallery-right svg {
				fill: currentColor;
				height: auto;
				width: 100%;
				pointer-events: none;
			}

/*** faq ***/
	#faq details > div:last-child {
		padding-bottom: calc(2 * var(--font-size));
	}

		#faq h3 {
			float: right;
			line-height: 1.1;
			transition: var(--transition-time);
		}

			#faq summary:hover h3, #faq summary:focus h3 {
				color: var(--dark-yellow);
			}
		
		#faq h4 {
			padding-top: var(--navigation-height);
			text-align: left;
		}

		#faq p {
			text-align: left;
		}

		#faq hr {
			width: 100%;
			margin: var(--navigation-height) 0 0 0;
		}

/*** message ***/
	#message {
		position: fixed;
		top: calc(2 * var(--gap-size) + var(--navigation-height));
		left: 50%;
		transform: translateX(-50%);
		min-width: calc(15 * var(--font-size));
		width: auto;
		max-width: var(--content-width);
		height: auto;
		min-height: calc(4 * var(--gap-size) + 2 * var(--font-size));
		font-size: calc(2 * var(--font-size));
		transition: var(--transition-time);
		opacity: 0;
		pointer-events: none;
		user-select: none;
		border-radius: var(--border-radius);
		padding: var(--gap-size) calc(2 * var(--gap-size));
		font-family: var(--main-font-family);
		color: var(--light-gray);
		box-shadow: 0 0 var(--shadow-size) var(--dark-gray);
		vertical-align: center;
		box-sizing: border-box;
		z-index: 1000;
	}

		#message[visible] {
			opacity: 1;
		}

		#message[success="true"] {
			background: var(--green-gradient);
		}

		#message[success="false"] {
			background: var(--red-gradient);
		}